07. Chrome 인스펙터 개요 내가 보고 있는 페이지에 어떤 요소가 사용되고 있는지 볼 수 있는 '개발자 도구(= Chrome 인스펙터)'. F12 를 눌러도 되고, Ctrl + Shift + I 를 누르는 방법도 있다. 아니면, Chrome 오른쪽 위에 있는 ⋮ 버튼을 누른 뒤, 도구 더보기 > 개발자 도구를 선택해도 된다. 08. HTML 상용구boilerplate HTML이라면 갖추어야 할 필수적인 구조가 있다! 이게 없다면 아무리 tag를 잘 사용하고 요소를 잘 사용하더라도 제대로된 HTML 문서가 될 수 없다!! 이러한 필수적인 구조를 HTML 상용구boilerplate라고 부른다. 내가 만드는 모든 HTML 문서에 들어가야 하는 표준화된 마크업을 뜻한다. 상용구가 없어도 브라우저에서 보여주..

두 박스 모델 사이 여백 = 마진margin 한 박스 모델에서 테두리와 내용 사이 여백 = 패딩padding 1. 요소 주변 여백 margin 설정 요소와 요소 사이의 간격을 조절할 때, 이 마진margin이라는 속성의 값을 건드리면 된다. margin: | | auto ; 속성값 설명 예시 너빗값, 높잇값을 px, em과 같은 단위와 수치로 지정. margin: 50px; 박스 모델을 포함한 부모 요소를 기준으로 너빗값, 높잇값을 %로 지정. margin: 0.1%; auto display 속성에서 지정한 값에 맞게 적절한 값을 자동 지정. 전날 했던 테두리 디자인을 할 때처럼 margin도 상하좌우를 다르게 설정할 수 있다. margin-top, margin-right, margin-bottom, m..

이번 섹션에 포함된 강의명은 다음과 같다. (강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!) 순서 강의명 소요 시간 중요도 (필수crucial/중요important/선택nice to have) 01 HTML 개요 Introduction to HTML 6' 55" - 02 우리의 첫 HTML 페이지 Our Very First HTML Page 5' 33" - 03 팁: 모질라 개발자 네트워크 Tip: Mozilla Developer Network 2' 41" 중요 (but 필수는 ×) 04 단락 요소 Paragraph Elements 3' 14" 필수 05 제목 요소 Headings Elements 5' 36" 필수 06 코딩 연습 1:..

5. 둥근 테두리: border-radius 박스 모델의 꼭짓점 부분을 둥글리는 속성이다. 둥근 네모에서부터 타원형까지도 만들 수 있다. border-radius: | ; * radius: 반지름, 반경 속성값 설명 px, em 등의 단위와 수치로 표시. 현재 요소의 크기를 기준으로 비율(%)로 지정. 예제 1. ↓ 이걸 표 테두리에도 응용해볼까~? ↓ 오오오오오옹 된다 된다!!😍 이것을 더 응용해서! 동그란 이미지는 어떻게 만들 수 있을까? 이미지의 가로, 세로를 같은 크기로 지정하고, border-radius: 50%;로 지정하면 된다! 예제 2. ↓ 6. 원하는 꼭짓점만 둥글게 만들기 border-위치를 나타내는 단어-radius 속성으로 표시하면 된다. 그러니까 예시로 들자면, 왼쪽 아래 꼭짓점 ..

박스 모델의 여백에 테두리, 마진, 패딩 등을 지정할 때, 상하좌우 각각의 방향마다 다른 디자인으로 만들 수 있다. 그렇게 다른 디자인을 지정할 때, 지정하는 순서가 정해져 있다. ( 위 top ) ·····► ( 오른쪽 right ) ··········► ( 아래 bottom ) ··········► ( 왼쪽 left ) 1. 테두리 스타일: border-style border-style을 따로 지정하지 않으면 default 값은 none이라서, 테두리 색상이나 두께를 지정해도 나타나지 않는다. border-style: none | hidden | solid | dotted | dashed | double | groove | inset | outset | ridge ; 속성값 설명 예시 none 테두리..

3. width, height: 콘텐츠 영역 크기 지정 어제 공부했었던 박스 모델의 제일 안쪽, 콘텐츠 영역의 크기를 지정하는 속성으로는 width와 height가 있다. width: | | auto ; heigth: | | auto ; 두 속성에 대해 쓸 수 있는 속성값은 크기, 백분율, auto 세 가지이다. 속성값 설명 너비, 높이 값을 px, em 단위로 지정. 박스 모델을 포함하는 부모 요소를 기준으로 너비나 높이 값을 %로 지정. auto 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정. default 값. 예제. ↓ 4. box-sizing: 박스 모델 크기 계산 위에서 다룬 width, height는 '콘텐츠 영역'의 크기만을 지정할 뿐 주변의 여백까지는 고려하지 않은 크기이..