한 걸음씩

1. 개요 ► CSS Flexbox 요소를 행과 열 형태로 배치하는 1차원 레이아웃 방식 요소 간 '공간 배열'과 '정렬' main axis flex item들이 배치되는 기본 축 (가로 아님) main start에서 시작하여 main end방향으로 배치 cross axis main axis에 수직인 축 (세로 아님) cross start에서 시작하여 cross end 방향으로 배치 Flex Container display: flex; 혹은 display: inline-flex; 가 설정된 부모 요소 이 컨테이너의 1차 자식 요소들이 Flex item이 됨 flexbox 속성 값들을 사용하여 자시기 요소 Flex Item들을 배치 Flex Item Flex Container 내부에 레이아웃 되는 항목 2..

1. Floats ► CSS Float 요소를 띄어서 텍스트 및 인라인 요소가 그 주위를 감싸도록 하는 배치 왼쪽 혹은 오른쪽으로 띄워 Normal flow에서 벗어남 텍스트 열 내부에 떠다니는 이미지를 포함하면서도 해당 이미지의 좌우에 텍스트를 둘러싸는 간단한 레이아웃을 구현하기 위해 도입 신문 레이아웃 전체 레이아웃을 구성하는 데 사용되었으나, Flexbox와 Grid의 등장으로 인해 원래 목적으로 돌아감 float-left ... float-right ... block의 성질을 무너뜨리기 때문에 위와 같이 전체 layout이 깨지는 것을 방지하기 위해 추가적인 작업이 필요하다 [...]::before (or ::after) { content: ''; display: block; clear: left..

1. 개요 ► CSS Layout 각 요소의 위치와 크기를 조정하여 웹 페이지의 디자인을 결정하는 것 Display, Position, Floats, Flexbox ... 2. 포지션 ► CSS Position Normal Flow에서 요소를 끄집어내서 다른 위치로 배치하는 것 Normal Flow : CSS를 적용하지 않았을 경우 웹페이지 요소가 기본적으로 배치되는 방향 다른 요소 위에 놓기, 화면 특정 위치에 고정시키기 등 Position 유형 : static, relative, absolute, fixed, sticky CSS Position은 전체 페이지에 대한 레이아웃을 구성하는 것이 아닌 페이지의 특정 항목의 위치를 조정하는 것에 관한 것 ► Position 유형별 특징 static 기본값 요..

1. 개요 ► CSS Box Model 모든 HTML 요소를 (사각형) 박스로 표현 박스에 대한 크기, 여백, 테두리 등의 스타일을 지정하는 디자인 개념 2. 구성 요소 box1 box2 💡 box3를 오른쪽에 위치하게 하려면 어떻게 해야 할까? 박스에 아무 설정도 안 했을 때 margin-right: auto; 상태인데 오른쪽에 위치하는 것으로 위치를 변경하려면 margin-left: auto; 상태로 설정한다 더 나아가서 가운데 정렬하려면 margin-right: auto;와 margin-left: auto; 상태로 같이 정렬해 주면 된다 ► width & height 요소의 너비와 높이를 지정 이때 지정되는 요소의 너비와 높이는 콘텐츠 영역을 대상으로 함 ► Box-sizing 요소의 너비와 높이를..

'web page' ⊂ 'web site' ⊂ 'web' 1. Structuring the web HTML(HyperText Markup Language) : 웹 페이지의 의미와 구조를 정의하는 언어 Hypertext 웹 페이지를 다른 페이지로 연결하는 링크 참조를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 Markup Language 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어 ► HTML Element 하나의 요소를 여는 태그와 닫는 태그 그리고 그 안의 내용으로 구성됨 닫는 태그는 태그 이름 앞에 슬래시가 포함되며 닫는 태그가 없는 태그도 존재 ► HTML Attribute 요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 함 (p와 c..