목차
WEB2 (8~15)
WEB2 CSS - 8. 박스 모델 - YouTube
본 글은 유튜브 무료 강의 생활코딩의 내용을 정리하는 글
1. 박스 모델
block element : 화면 전체 크기를 갖는 태그
inline element : 자기 자신만의 크기를 갖는 태그
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
h1, a{
border:5px solid red;
}
</style>
</head>
<body>
<h1>Home</h1>
<p>
<a href="https://en.wikipedia.org/wiki/Home_page">A home page (or homepage)</a> is the main web page of a website.[1]
The term may also refer to the start page shown in a web browser when the application first opens.[2]
Usually, the home page is located at the root of the website's domain or subdomain.
For example, if the domain is example.com,
the home page is likely located at www.example.com/.
</p>
</body>
</html>
박스 모델
→ HTML 태그 하나하나를 일종의 박스로 취급해서 그것의 부피감을 결정
→ 부피감을 결정하는 것을? 디자인의 핵심적인 요소이다
<style>
h1{
border:5px solid red;
padding:20px;
margin:0;
}
</style>
1.1. 개발자 도구(검사)
F12를 눌러서 개발자 도구
여기서 Style을 확인하면 페이지를 구성하는 각 태그들이 어떤 방식으로 CSS 영향을 받고 있는지 확인 가능
→ Style 값을 확인하면서 어느 부분을 조정해야 하는 지 알 수 있음.
2. 그리드
<div>: 아무런 의미가 없고 디자인을 위한 태그, block level element
<span> : <div>와 비슷한 태그지만, inline level element
CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의
3. 미디어 쿼리
반응형 디자인 : 화면의 크기에 따라서 웹 페이지의 각 요소들 반응해서 최적화된 모양으로 바뀌게 하는 것.
웹은 수많은 기기에서 작동 가능, 그만큼 수많은 형태의 디자인에 대응되게 반응해야 함.
CSS
@media(min-width:800px){
div{
display:none;
}
→ 화면의 픽셀 최소값이 800px이라면 div 태그로 감싸진 것을 보이지 않게 하고 싶다라는 말.
4. CSS 코드의 재사용
모든 웹페이지에서 CSS 코드가 중복되는 점!
style 태그 안에 있던 내용을 css로 파일을 만든 뒤
<link> 태그를 활용하여 불러오는 것을 통해 해결
Welcome
WEB The World Wide Web (WWW), commonly known as the Web , is an information system enabling documents and other web resources to be accessed over the Internet. Web browsers receive HTML documents from a web server or from local storage and render the docum
dwoi8988.github.io
'Web > CSS' 카테고리의 다른 글
| [CSS] 그리드 예제 연습 (0) | 2023.03.16 |
|---|---|
| [CSS] 티스토리 블로그 제목 폰트 바꾸기 (0) | 2023.03.09 |
| [CSS] 생활코딩 Web2 내용정리 (CSS, 기초 문법, 선택자, 속성) (0) | 2023.03.08 |
댓글