06. 디스플레이 속성 몇몇 요소들은 본질적으로 '인라인inline 요소' 또는 '블록block 요소'이다. 인라인 요소 = 다른 요소들과 같은 라인에 배치 블록 요소 = 다른 요소들과 다른 라인에 단독으로 배치 인라인 요소와 블록 요소 간에는 같은/다른 라인에 배치된다는 차이점뿐만 아니라 margin, padding, width, height에 있어서도 차이점을 보인다. inline block inline-block width, height 무시됨. margin, padding은 다른 요소를 좌우 양쪽으로 밀어내지만, 상하 양쪽으로는 밀어내지 않음. 웹 문서의 흐름을 끊어내고 혼자 그 줄을 다 차지함. 다른 요소가 이들의 width, height, margin, padding을 침범할 수 없음. inl..

이번 섹션에 포함된 강의명은 다음과 같다. (강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!) 순서 강의명 소요 시간 중요도 (필수crucial/중요important/선택nice to have) 01 박스 모델: 가로와 세로 Box Model: Width & Height 5' 40" 필수 02 박스 모델: 테두리와 모서리 둥글리기 Box Model: Border & Border-Radius 12' 08" 필수&선택 03 코딩 연습 12: Box Model Practice Coding Exercise 12: Box Model Practice - - 04 박스 모델: 패딩 Box Model: Padding 7' 45" 필수 05 박스 모델:..

반응형 웹 디자인responsive web design PC, 스마트폰, 태블릿 PC, 스마트 TV 등 다양한 화면 크기에 맞게 웹 요소를 재배치하고 표시 방법을 바꿔 웹 사이트를 구현하는 방법. 모바일에서 웹 사이트를 PC버전으로 접속했을 때 모든 내용이 작게 보이는 이유 ∵ PC 화면에서의 픽셀 ≠ 모바일 화면에서의 픽셀 → *뷰포트viewport를 지정하면 접속한 기기의 화면에 맞게 확대/축소해서 표시할 수 있다. * 뷰포트(viewport) : 스마트폰 화면에서 실제 내용이 표시되는 영역 뷰포트 지정하는 방법 위처럼 안녕하세요? ↓ PC의 브라우저뿐만 아니라 스마트폰, 태블릿 PC 등등 기기들도 다양하고 그 화면의 크기 또한 천차만별이다. 하지만 각각의 기기에서 어떻게 보일까 테스트하기 위해서 모..

11. 가상 요소 앞에서 학습한 가상 클래스와 용어가 헷갈릴 수는 있다. 가상 요소 또한 '~에 한하여'와 같이 스타일을 적용하는 데 제한을 거는 방식이기 때문이다. 하지만 가상 요소는 선택된 요소에서도 특정 부분만을 선택하기 때문에 가상 클래스와는 엄연히 다른 개념이다. MDN 홈페이지에서 가상 요소로 쓰일 수 있는 목록들이 나타나 있는데, 그 목록 중에서도 플라스크 아이콘이 뒤에 붙어있는 것들이 있었다. (시험용을 뜻한다. 일종의 베타 테스트 중인 가상 요소이니 실제 개발 코드로 아직 사용하지 말라는 뜻이라고 한다.) ▼ MDN에 나열된 가상 요소 목록 (취소선 그어진 것이 시험용) ::after ::cue-region ::grammar-error ::selection ::backdrop ::firs..

07. 인접 선택자 & 직계 자손 선택자 두 선택자는 꼭 알아둬야하지만 앞에서 배운 요소 선택자, ID 선택자, 클래스 선택자보다는 자주 쓰이진 않는다. 인접 선택자( = 결합자) 두 선택자 사이에 '+' 기호를 써서 표기하는데, h1 + p { color: red; } 처럼 쓴다면, h1 바로 다음에 오는 p를 선택하라는 의미이다. (실제로 선택되는 것은 + 뒤에 나오는 선택자인 것!) 그리고 +로 연결된 두 선택자 간의 관계는 '부모-자식'관계가 아니라 '형제'관계이다. 직계 자손 선택자 두 선택자 사이에 '>' 기호를 써서 표기한다. 인접 선택자에서 '형제' 관계였던 것과 달리 '부모-자식' 관계이다. div > nav { color: white; } 위와 같이 쓰면 의 바로 안에 쓰인 에 그 스타..