1. 배치 방법 결정: display display 속성을 이용하면 블록 레벨 요소 → 인라인 레벨 요소 인라인 레벨 요소 → 블록 레벨 요소 로 자유롭게 전환할 수 있다. display는 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있다. 속성값 설명 block 인라인 레벨 요소 → 블록 레벨 요소 전환. inline 블록 레벨 요소 → 인라인 레벨 요소 전환. inline-block 인라인 레벨 요소, 블록 레벨 요소 속성을 모두 갖고 있고, 마진과 패딩 지정 가능. none 해당 요소를 화면에 표시 × 예제. CSS 복수 선택자의 역할을 확인해보기 위해서 예제를 약간 변형했다. menu 1 menu 2 menu 3 menu 4 men..

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 속성으로 표시하면 된다. 그러니까 예시로 들자면, 왼쪽 아래 꼭짓점 ..