1. HTML 요소들은 Block과 Inline 요소 크게 두가지로 분류
1-1. Block요소들은 화면상에서 항상 새로운 줄에서 시작하고, 위 아래에 서로 쌓이는 형식으로 나타남
Block요소들은 또 다른 Block 요소를 자식으로 가질 수도 있고, Inline 요소를 자식으로 가질 수도 있다.
p와 div가 기본으로 Block요소이다
1-2. Inline 요소들은 새 줄에서 나타나지 않음. 하나에 이어 또 다른 하나가 줄줄이 이어 붙어서 나타나는 형식.
Inline 요소들은 또 다른 INline 요소들을 자식으로 포함할 수 있지만, Block 요소들은 자식으로 못품음
2. Positioning - css를 이용하여 웹페이지 컨텐츠의 위치 조정
2-1. Using Flex
CSS의 flex 속성 이용. flex 속성은 기존 요소들의 흐름에서 벗어나, 다양한 방식으로 자식 요소들을 배치할 수 있는 유연함 제공.
2-2. Using Inline Block
display 속성에 해당하는 값 중 하나인 inline-block 이용
2-3. Using Position Property
정밀하게 배치해야할 경우 사용. 모든 요소들은 기본으로 position: static;을 가짐
제일 많이 쓰이는게 position: relative; 와 position: absolute;
a. Relative Position
position: relative; 가 적용된 요소들의 경우 별도의 추가적인 css 속성을 적용하지 않으면 별다른 특이점이 없음. 하지만 top, right, bottom, left 등의 값을 조정하게 되면 위치가 조정됨
b. Absolute Position(*설명이랑 예시 코드가 이해 잘 안됨)
position: absolute;가 적용되면 기존 위치가 유지되지 않고, 가장 가까운 부모 요소 중 position: relative;가 적용된 요소를 찾아 그 ㅇ소를 기준으로 위치가 잡히게 됨.
만약 부모요소중 position: relative; 를 가진 요소가 없는 경우, 전체 페이지를 기준으로 위치가 잡히게 됨
시멘틱 구조 태그
시멘틱 구조 태그란?
사람의 눈으로 봐도 코드의 의미를 확실히 구별할 수 있음
시멘틱 태그는 모두 div 태그와 같은 기능을 수행하는 태그임.
들여쓰기와 스페이스
Class / ID Naming Convention
HTML 요소의 클래스명과 아이디명은 일반적으로 Kebab Case가 사용됨.
케이스 스타일이란?
File / Directory Convention
파일 혹은 폴더 이름에는 공백, 한글 사용을 가급적이면 삼가
구글클론
Google Clone
html 코딩까지 완료
2022.01.05(2시간5분)
