박스 모델의 여백에 테두리, 마진, 패딩 등을 지정할 때, 상하좌우 각각의 방향마다 다른 디자인으로 만들 수 있다. 그렇게 다른 디자인을 지정할 때, 지정하는 순서가 정해져 있다. ( 위 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는 '콘텐츠 영역'의 크기만을 지정할 뿐 주변의 여백까지는 고려하지 않은 크기이..

1. 블록 레벨block-level 요소 & 인라인 레벨inline-level 요소 ! 잠깐 복습 TIME : 태그tag vs. 요소element 태그(tag) 로 묶인 명령어. ex, , , , , , , 등. 요소(element) 태그를 이용해서 만들어낸 웹 페이지 구성 요소. 열린 태그부터 닫힌 태그까지 덩어리를 말한다. ex 1, 안녕하세요. ex 2, 임영웅님이 방송에서 부른 다시 사랑한다면 노래 진짜 좋더라 ex 3, 임영웅님이 부른 다시 사랑한다면 복습 내용 출처: https://bskyvision.com/836 블록 레벨 요소block-level element tag를 사용해 요소를 삽입했을 때 자기 혼자 한 줄을 차지하는 것. = 요소의 너비가 100% 블록 레벨 요소의 양 옆에는 다른 ..

이번 섹션에 포함된 강의명은 다음과 같다. (강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!) 순서 강의명 소요 시간 중요도 (필수crucial/중요important/선택nice to have) 01 인터넷이 어떻게 동작하는가? (5분 이내로 설명) The Internet in 5 minutes 5' 42" 중요 (but 필수는 ×) 02 웹이란? Intro to the Web 6' 01" 중요 (but 필수는 ×) 03 HTTP 요청 및 응답 과정 HTTP Request/Response Cycle 4' 21" 중요 (but 필수는 ×) 04 프론트엔드와 백엔드 Front-end and Back-end 3' 59" - 05 HTML/CS..

양질의 강의가 많다는 Udemy에서 가장 인기가 좋은 웹 개발 강의를 선택해서 듣기로 했다. 많은 연습을 통해서 최소한 HTML, CSS, Javascript 정도는 자유자재로 다룰 수 있는 상태로 내년에 국비지원학원 수업을 수강했으면 하는 개인적인 바람이 있다. 무엇보다도, 내가 선택한 이 강의, Colt Steele 강사님의 The Web Developer 부트캠프 2022는 전반적으로 풀스택(프론트엔드+백엔드) 과정을 모두 다루고 있는 것으로 보이는데, 나는 이를 통해서 내게 좀 더 맞는 개발 분야를 특정하려고 한다. 프론트엔드가 될지, 백엔드가 될지 모르니까. 강의에 한글 자막도 지원이 되어서 편하게 들을 수 있다. 강사님 목소리도 굉장히 젠틀하니 좋은 것 같다 헤헿 영어 강의를 듣는 드문드문 들..