나의 모양

💙 실습 트위틀러 목업 구현 트위틀러: 가짜 트위터 실습 내용: 주어진 이미지와 함께 최소한의 html, css 그리고 이미 만들어진 js로 창의력 한 스푼을 더해 트위틀러 목업을 만드는 것 HTML 더보기 twittler Username Message Tweet! Check New Tweets CSS 더보기 #greeting { font-size: 24px; font-family: sans-serif; font-weight: bold; border-radius: 1em; color: #2aa9e0; background-color: white; text-align: center; margin: 0.5em; padding: 0.5em; } #box1 { background-color: #e8f5fd; p..

📌 페이지 레이아웃 💙 레이아웃: 화면을 나누는 방법 🤍 HTML 구성하기 콘텐츠 흐름: 좌 → 우 / 위 → 아래 CSS 화면 구분 수직분할: 콘텐츠 가로 배치 수평분할: 내부 콘텐츠의 세로 배치 수평분할 + height ⇒ 직관적인 수평 분할 가능 아이콘 1 아이콘 2 아이콘 3 영역1 영역2 영역3 영역4 영역5 /* CSS */ .w70 { width: 70%; } .h40 { height: 40%; } 🤍 레이아웃 리셋 박스를 잡는데 있어 HTML의 기본 스타일로 인한 어려운 점 태그 기본 스타일에 약간의 여백이 있음 width, height 계산에 여백 불포함 (003의 박스모델 참고) 브라우저마다 다른 기본 스타일 해결방법 기본 스타일링 제거 * { box-sizing: border-box;..

🤍 HTML(HyperText Markup Language) 태그(tag)들의 집합 tag: 로 묶인 HTML의 기본 구성 요소 Semantic Tag: 각 요소의 역할을 명확하게 규정해주는 것, 직관적인 내용 파악 HTML elements reference - HTML: HyperText Markup Language | MDN HTML elements reference - HTML: HyperText Markup Language | MDN This page lists all the HTML elements, which are created using tags. developer.mozilla.org 열고(closing tag) 가 한 쌍이지만, 닫는 태그가 없을 경우 연 태그 맨 마지막에 / 붙여주면 ..