'📒 education archive/🔗HTML' 카테고리의 글 목록
my code archive
article thumbnail
[국비학원 기록/HTML5] CSS Flex 개념, Flex Container, Flex Items

CSS3 Flexible Box (정렬) - 1차원 레이아웃 -1차원이라는 개념은 수직은 y축, 수평은 x축 -수직 정렬, 수평 정렬에서 x축과 y축처럼 하나의 축을 1차원이라고 한다. CSS Flex Flex Container : 부모 요소 item : 자식 요소 => 컨테이너가 Flex 영향 받는 전체 공간, 설정된 속성에 따라 각각의 아이템들이 특정 형태로 배치되는 개념. 1. Flex Container -display : Flex Container의 화면 출력(보여짐 특성) -아이템들이 가로 방향으로 배치되고 width만큼만 차지하게 된다. height는 알아서 컨테이너 높이만큼 늘어난다. -display: flex; => Flex Container를 정의 -flex-direction => fle..

article thumbnail
[국비학원 기록/html5] CSS 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자

가상 클래스 선택자(Pseudo Classes Selectors) 1)hover -E:hover -E에 마우스(포인터)가 올라가 있는 동안에만 E 선택 2)active -E:active -E를 마우스로 클릭하는 동안에만 E 선택 3)focus -E:focus -E가 포커스된 동안에만 E 선택 4)first-child -E:first-child -E가 형제 요소 중 첫번째 요소라면 선택 5)last-child -E:last-child -E가 형제 요소 중 마지막 요소라면 선택 6)nth-child(n) -E:nth-child -E가 형제 요소 중 n번째 요소라면 선택 7)nth-of-type(n) -E:nth-of-type(n) -E의 타입(태그 이름)과 동일한 타입인 형제 요소 중 E가 n번째 요소라면 ..

article thumbnail
[국비학원 기록/html5] CSS 기본 문법, 선택자

CSS 선택자 1.선택자 1)HTML에 스타일(CSS)을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인(sign). 2) 스타일의 종류(Property) ---- 선택자 { 속성 : 값; } ----- 스타일(CSS)을 적용할 대상(Selector) 선택자 { : 자식 선택자 결과 ul > .orange : ul의 자식 클래스 orange 선택 .orange + li : 클래스 orange의 다음 형제 요소 li 하나 선택 .orange ~ li : 클래스 orange의 다음 형제 요소 li 모두 선택 결과

article thumbnail
[국비학원 기록/html5] HTML 문서 구조, <div>,<h>,<p>,<a>,<span>,<br>,<ul>,<input>,<table>

HTML 문서 구조 1. 1)division, 분할, 문서의 부분이나 섹션 정의 2)단순히 특정 범위를 묶는(wrap) 용도로 사용 -> 특별한 의미가 없는 구분 3)묶인 부분들에 CSS나 JS를 적용 4)블록(상자)요소 2. 1)제목을 의미 2)블록(상자)요소 3)숫자가 작을 수록 더 중요한 제목을 정의 3. 1)문장을 의미 2)블록(상자)요소 4., 1)순서가 필요없는 목룍의 집합 2) -목록 내 각 항목(List Item) 3)블록(상자)요소 5. 1)같은/다른 페이지로 이동하는 하이퍼링크를 지정하는 요소 2)href : 링크 URL target : 링크 URL의 표시(브라우저 탭) 위치 (_blank) 3)인라인(글자)요소 6. 1)특별한 의미가 없는 구분을 위한 요소 2)인라인(글자)요소 7. ..

article thumbnail
[국비학원 기록/html5] HTML 문서, <html></html>,<head></head>,<title></title>,<link></link>,<style></style>

0. 1)문서의 HTML 버전을 지정. 2)DOCTYPE (DTD,Document Type Definition) 3)마크업 언어에서 문서 형식을 정의. 4)웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도. 5)HTML5(표준) 1. 1)문서의 전체 범위 2)HTML 문서가 어디에서 시작하고 어디에서 끝나는지 알려주는 역할. 2. 1)문서의 정보를 나타내는 범위 2)웹 브라우저가 해석해야 할 웹 페이지의 제목,설명,사용할 파일 위치,스타일(CSS)같은 웹 페이지의 보이지 않는 정보를 작성하는 범위 문자 인코딩 방식 --------- 3) ------- HTML 문서(웹페이지)의 제작자,내용,키워드같은 여러 정보를 검색 엔진이나 브라우저에게 제공 3. 1)HTML ..

article thumbnail
[국비학원 기록/html5] HTML 개요, 기본 문법, 인라인(Inline)요소, 블록(Block)요소

1. 웹 기반 프로그램 특징 1)화면과 로직을 서버에서 모두 처리하므로 클라이언트가 특별히 수행할 작업이 없음. 2)모든 기능을 서버에서 처리하므로 보안 면에서도 우수함. 2. 정적(static) 웹 프로그래밍 1)웹 서버(Apache)에 미리 보여줄 HTML 페이지,CSS,이미지,JS(자바스크립트) 파일을 저장해놓고 브라우저에서 요청할 경우 그대로 전달하는 방식. 2)사용자는 페이지가 변경되지 않는 한 고정된 웹 페이지를 보게 함. 3)구성 요소 -웹 서버 : 각 클라이언트에게 서비스를 제공하는 컴퓨터를 의미. -클라이언트 : 네트워크로 서버에 접속한 후 서버로부터 서비스를 제공받는 컴퓨터를 의미. -HTTP(Hyper Text Transfer Protocol) :www 서비스를 제공하는 통신 규약. ..

반응형
반응형