1. 레이아웃 구성 방법 position 값을 활용한 레이아웃 구성 position 값과 상하촤주 값을 활용하여 요소 위치를 조절 동적으로 변화하는 디자인이나 특정 위치의 좌표값을 지정해주고자 할 때 주로 이용 자바스크립트 등을 이용하여 요소의 위치가 변화할 때 사용 특정 요소가 다른 요소의 간섭 없이 일정 위치에 자리잡아야 할 때 사용 float을 이용한 상대위치를 사용하는 방법 float과 clear 속성을 활용하여 상대적 위치를 조절 콘텐츠가 유동적이어도 문제가 없어 일반적으로 사용되는 기법 특정 좌표값을 사용하는 것이 아니기 때문에 동적으로 위치를 변화시키거나 요소 겹침을 사용하기는 어렵다 2. CSS 초기화 요소의 기본 스타일 값은 브라우저의 종류나 버전별로 차이가 있다 css를 초기화 하여, ..

1. 위치속성 절대적 위치 좌표 요소의 x좌표와 y좌표를 설정해 절대적 위치 지정 상대적 위치 좌표 요소를 입력한 순서대로 상대적 위치 지정 CSS의 positioning 일반흐름 normal flow 기본값 절대위치 absolute positioning 키워드 absolute, relative float 방식 top:30px left:40px;bottom:20px right:0px top:50% static position의 기본값 요소가 본래 가지고 있는 흐름을 가진다 relative static 속성값과 기본적으로 같은 흐름을 가진다 위치 조절을 위한 좌표값을 가질 수 있다 위치의 기준점을 상대적으로 잡는다 기본값인 static일 때의 위치를 기준으로 위치값을 가진다 absolute 요소의 순서에 ..

1. 가시속성 태그가 화면에 보이는 방식을 지정하는 속성 display 속성 none : 태그를 화면에 보이지 않게 한다 block : 태그를 block 형식으로 지정 혼자서 한 줄을 차지 inline : 태그를 inline 형식으로 줄을 차지하지 않고, 화면에 표시되는 콘텐츠 만큼만 영역을 차지 width, height 속성 지정 불가 margin 속성이 div태그의 좌우로만 지정 inline-block : 태그를 inline-block형식으로 지정 width, height 속성 지정 가능 margin 속성이 상하좌우로 적용 Dummy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dummy Dummy display-none Lorem ipsum ..

1. 키워드 각각의 스타일 속성에 따라 별도의 키워드 존재 display : block,inline, compact, grid 등 2. 크기단위 %, em, cm, mm, inch, px 등 %단위 기본 설정된 크기에서 상대적으로 크기를 지정 100%가 초기 설정 크기 부모요소의 크기 설정이 있을 경우 부모 요소의 상대 크기 em단위 배수를 나타내는 단위 1배 = 1em = 100% 1.5배 = 1.5em = 150% 부모요소의 크기 설정이 있을 경우 부모 요소의 상대 크기 px 단위 절대적인 크기를 지정할 때 사용 기본 속성 16픽셀 기본% 100% 150% 200% 기본em 1em 1.5em 2em 기본px 16px 24px 32px 3. 색상 단위 키워드값 color : red; 등의 방법으로 키워..

1. 기본 특정 html태그를 선택할 때 사용하는 기능 선택자를 사용해 특정 태그를 선택하면 원하는 스타일 적용 가능 선택자{스타일속성:스타일값;} 인라인 방식 태그 style = "스타일속성:값;스타일속성:값;" style 태그 안에 스타일 넣기 style type = "text/css" div{~} css 경로 불러오기 link rel = "stylesheet" type="text/css" href="파일경로" 스타일시트 사용방법 1 inline방식 div태그 p태그1 p태그2 h3태그 import를 이용한 css 경로 추가 파일을 분리할 수록 html 내부에 link 태그가 많아져 코드가 지저분해진다 import를 이용하여 정리 @import 뒤에 url 함수를 이용해 파일경로 입력 @import ..

1. DOCTYPE 기본 틀 doctype 문서 유형을 지정 html문서이고, 어떤 유형을 사용했는지 알려 웹브라우저에서 그에 맞게 해석하게 한다 html lang = "ko" lang 속성을 사용해 문서에 사용할 언어를 지정 언어표기를 하지 않으면 검색사이트에서 언어를 제한, 검색이 되지 않는다 head 브라우저에게 정보를 주는 태그 화면에는 보이지 않으며, 브라우저가 알아야 할 정보를 입력 문서에서 사용할 외부파일 링크 title 문서제목, 제목표시줄에 표시 meta 문자 인코딩 및 문서키워드 2. 글자 태그 웹페이지에서 가장 많은 비중을 차지하는 태그 주석 : 제목 / h h태그 h1, h2, h3, h4, h5, h6 h는 header를 의미, 각각의 숫자는 크기 및 우선순위를 나타낸다 h1 : ..