HTML의 구조는 크게 블록요소와 인라인요소로 나눌 수 있다. (몇몇 특수경우를 제외) 블록요소와 인라인요소는 아래와 같은 상황에 주로 사용하게 된다. • 블록요소레이아웃, 구조 등 페이지의 전체적인 UI를 결정할때는 블록요소를 주로 사용width, height, margin, padding등 레이아웃에 영향을 주는 속성이 기본적으로 적용 가능단락을 나누거나 줄바꿈이 필요할때 사용할 수 있음 • 인라인요소텍스트 기반 컨텐츠를 꾸미거나 기능을 추가할때 사용 (텍스트 레이아웃을 유지하며 기능 추가하기 등)레이아웃에 영향을 주는 CSS 속성들이 일부 적용되지 않음간단한 아이콘, 버튼, 짧은 컨텐츠 등에 사용 인라인요소는 여러개를 붙여 사용할 경우 의도하지 않은 공백이 발생하는 것을 알 수 있다. 이는 부모요소..

border와 outline은 둘다 요소의 외곽을 꾸미는 속성이지만 차이가 있어 용도에 따라 선택하여 사용할 수 있다.   1. 외곽선의 스타일링선의 색상, 두께, 스타일 등 기본적인 스타일은 두 속성 다 지정이 가능하지만 차이가 발생하는 부분도 있다. • 개별 외곽선 스타일border에서는 border-top, border-right 등의 속성을 활용해서 한쪽 면에만 외곽선 스타일을 지정할 수 있다. 그러나 outline에서는 지원하지 않아 개별적인 스타일링은 불가능하고 전체 외곽선 설정만 가능하다. • 둥근 모서리border는 border-radius 속성을 이용해 둥근 모서리를 적용할 수 있다. 하지만 outline에는 outline-radius같은 속성이 존재하지 않는다. 하지만 outline이 ..

Grid에 항목들을 채워넣다보면 기존에 정해놓은 그리드 사이즈를 초과하여 공간을 차지하게 되는 경우가 있다.그리드 컨테이너안에 들어있는 아이템 내부도 원하는 항목들로 채워넣게 되는데 내부 항목들의 종류나 길이에 따라 이러한 문제가 발생하기도 한다.이는 그리드의 각 아이템에서 해결하는 방법이 있고 그리드 컨테이너 설정 자체에서 해결하는 방법이 있다. 1. 그리드 아이템에서 해결하기텍스트의 white-space 속성으로 인해 문제가 발생할 수 있다.원래 텍스트의 길이가 길어지면 정해진 width를 넘어갈때 자동으로 줄바꿈된다.하지만 텍스트가 길때 자동으로 생략 처리 하고싶거나 여러가지 텍스트 표시방법을 바꿀때 white-space 속성을 사용하게 된다. white-space 속성은 HTML요소의 공백과 줄바..

CSS에서 요소간의 배치를 다룰때 flex나 grid를 사용하면 원하는 구조를 빠르고 편하게 구현할 수 있다.특히 각 요소들을 가운데 정렬하여 깔끔한 UI를 구현할때 flex를 활용하면 매우 편리하다.하지만 flex를 사용하지 않고 margin값만으로도 요소를 가운데에 정렬할 수 있다.  1. margin값으로 요소 가운데 정렬하기margin: auto 값을 주어 가운데정렬을 하기 위해서는 몇가지 조건이 있다.1-1. 수평정렬(가로 가운데 정렬) 조건블록 요소여야 함 (인라인 요소의 경우 display값을 block 혹은 inline-block값으로 지정해야함)※ 블록요소는 기본적으로 부모요소의 가로너비 전체를 차지하며 다음 요소는 아래로 내려가게 된다. 그렇기때문에 좌우 공간을 이미 확보하고있는 블록요..

CSS의 position 속성을 이용하면 웹페이지에서 요소가 배치되는 방법을 정의할 수 있다.position 속성에 설정할 수 있는 값은 static, relative, absolute, fixed, sticky 가 있다. static 외의 것들은 오프셋값을 적용할 수 있다.더보기오프셋은 CSS의 top, right, bottom, left 속성으로 기준위치에서 얼마나 떨어트릴지를 지정할 수 있다. 예를 들어 한 요소의 위치좌표가 (0,0) 일때 top: 40px; left: 60px; 로 지정 하면 (40,60)으로 이동한다. 1. static문서 흐름에 따름 : O오프셋, z-index 적용 가능 : X position값을 따로 지정하지 않았을때 모든 요소는 static값으로 배치된다.주변 요소나 상..

HTML에서 작성한 각종 태그들은 웹페이지 렌더링 단계에서 Box Model형태를 가지게 된다.이는 웹브라우저의 렌더링 과정중 레이아웃 단계에서 만들어진다. (※ 웹브라우저 렌더링 과정, 원리) Box Model의 구조를 알아보고 HTML항목들이 일정 공간을 차지하도록 하는 margin과 padding의 차이점을 알아보자. 1. Box ModelHTML의 요소들은 웹페이지에 렌더링될때 모두 박스모양으로 구성된다. 이를 박스 모델이라고 부르며 content, padding, border, margin 4가지 요소로 구성되어있다.content (내용) : 가장 안쪽에 들어있는 항목(이미지에서 221x20 부분)으로 텍스트나 이미지 등 화면에 표시되는 내용이 들어있는 공간이다. 이는 height, width같..

HTML와 CSS, Javascript로 개발을 완료한 뒤 웹페이지에 표시를 시키기 위해서는 웹 브라우저의 렌더링 과정이 필요하다.React 등의 프레임워크로 개발된 프로젝트도 HTML, CSS, Javascript로 변환되어 브라우저에서 실행된다. 웹 브라우저는 렌더링 엔진을 통해 HTML 파일을 렌더링한다. 1. 웹 브라우저의 렌더링 과정※ 웹 브라우저마다 렌더링 엔진이 다르며 전체 렌더링 과정에 조금씩 차이가 있다. 아래 그림은 렌더링 과정을 간소화하여 표현했으며 실제 렌더링은 코드, 네트워크, 최적화, 기타 환경의 차이등의 이유로 훨씬 복잡하고 유기적으로 작동한다.문서 다운로드 : 사용자가 요청한 웹페이지에 해당하는 문서를 서버에서 가져온다.HTML 파싱 및 DOM트리 생성 : 가져온 문서인 HT..

웹페이지를 보다 동적으로 만들어 사용자 경험을 향상시키기 위해서는 transition을 다룰 수 있어야 한다. transition에는 property, duration, function, delay 속성이 있다. 각각 애니메이션을 적용시킬속성, 애니메이션 시간, 애니메이션 종류, 애니메이션 실행 전 딜레이를 의미한다. transition은 해당 요소의 모양이 변하기 전 css에 적용해야한다. hover 속성 등으로 바뀐 모양은 따로 지정한 뒤 원래의 css속성에 transition 옵션을 적용한다. transition 형식 (기본) div { transition-property : height; transition-duration : 0.5s; transition-delay : 1s; transition..