8. 박스모델 9. 박스모델 써먹기
<style>
/* 태그 크기 알아보기 */
h2{
border-width:5px;
border-color:red;
border-style:solid;
}
a{
border-width:5px;
border-color:red;
border-style:solid;
}
</style>
<h2>회화 반복 학습 프로그램</h2>
- display 속성을 통해 차지하는 공간을 설정할 수 있음
- display:none; 을 통해 안보이게 할 수 있음
<style>
/* 태그 크기 알아보기 */
/* block level element - 전체 공간(block)을 차지 */
h2{
border-width:5px;
border-color:red;
border-style:solid;
display:inline;
}
/* inline element - 자신의 부피만큼만 차지*/
a{
border-width:5px;
border-color:red;
border-style:solid;
display: block;
}
</style>
- 중복 방지
<style>
/* 중복 방지 */
/* ,를 통해 여러 태그를 나열해서 설정 가능 */
h2, a{
border-width:5px;
border-color:red;
border-style:solid;
display:inline;
}
/* 중복 속성 간소화 */
h2, a{
border:5px solid red:
}
</style>
- 박스 모델
<style>
h2{
border:5px solid red;
/* 컨텐츠와 테두리 사이의 간격: padding */
padding:20px;
/* block 간의 간격 */
margin: 20px;
/* block의 크기 설정 */
display:block;
width:500px;
}
</style>
- 웹페이지 분석 도구
10. 그리드 소개, 11. 그리드 써먹기
- <div></div>
- 의미도, 기능도 없는 태그
- <span></span>
- 그리드 기능
- 그리드로 감싸기 위해서는 감싸려고 하는 요소를 하나의 태그로 묶어줘야 함 → <div></div> 태그 활용
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr;
}
div{
border: 5px solid gray;
}
</style>
</head>
- 그리드 써먹기
- 그리드 내부 여백 조절
<style>
a {
color:black;
text-decoration: none;
}
/* id가 active인 선택자를 선택 */
#grid {
display: grid;
grid-template-columns: 400px 1fr;
}
#france {
padding-left: 25px;
}
h1 {
font-size:60px;
text-align:center;
}
/* grid 안에 있는 ol 태그 선택 */
#grid ol {
padding-left: 35px;
}
</style>
<div id="grid">
<ol>
<li><a href="1.html", target="_blank" >회화 반복 학습 프로그램</a></li>
<li><a href="2.html", target="_blank" >남은 식재료를 활용한 레시피</a></li>
<li><a href="3.html", target="_blank">일정 관리 프로그램</a></li>
<li><a href="4.html", target="_blank">나만의 웹사이트</a></li>
</ol>
<div id="france">
프랑스 공화국(프랑스어: République française), 약칭 프랑스(프랑스어: France)는 서유럽의 본토와 남아메리카의 프랑스령 기아나, 프랑스령 폴리네시아를 비롯해 여러 대륙에 걸친 해외 지역으로 이루어진 국가이다. 주요 도시들은 파리, 마르세유, 리옹, 툴루즈, 니스, 낭트, 몽펠리에, 비시 등이 있다.
</div>
</div>
- Can I use
Can I use... Support tables for HTML5, CSS3, etc
→ 웹 브라우저들이 특정 기능을 지원, 채택하고 있는지 확인 가능
12. 미디어 쿼리 소개
- 반응형 디자인
- responsive web
- 환경에 따라 디자인이 적절히 변화
- 화면의 크기에 따라 웹의 모습이 변화
- 미디어 쿼리
- @media(max-width:500px)
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 5px solid green;
font-size: 60px;
}
/* 최소 width가 500px. 화면 width가 500px 이상이면 나타나지 않음 */
@media(max-width:500px) {
div {
display:none;
}
}
</style>
</head>
- 검사 창에서 화면의 크기 확인법
13. 미디어 쿼리 써먹기
- 미디어 쿼리 써먹기
- 800px 이상일 때만 그리드가 나타남
- <style> #grid { display: grid; grid-template-columns: 300px 1fr; } @media(max-width:800px) { #grid{ display: block; } } </style> <div id="grid"> <div> <p> 회화 학습에 필요한 것들<br> <ol> <li>vocabulary 암기</li> <li>하루 1 표현 암기</li> <li>Daily check list</li> </ol> </p> </div> <div> 프랑스어(français, 프랑스어 발음: [fʁɑ̃sɛ])는 인도유럽어족 로망스어군에 속한 언어이다. 한국어에서는 한자로 음역 약칭으로 불어(佛語)라 부르기도 한다. 프랑스어는 (프랑스 북부에서 사용되던 언어인 “오일어”의 변종으로서) 프랑스에서 생겨났다. 프랑스어는 1539년부터 프랑스의 국어로 선포되었다.[5] 2018년 기준으로 전 대륙에 걸친 약 3억 명의 화자가 프랑스어를 사용한다[1] · [6] · [2]. 은 모국어 화자이다. 2018년 기준으로 전 세계 8000만 명의 학생들이 프랑스어를 배우고 있다.[7] 프랑코포니 국제기구에 따르면, 2050년경에는 전 세계의 프랑스어 화자가 7억 명이 될 것으로 추정된다.[8] </div> </div>
- 800px 이상일 때만 그리드가 나타남
<style> h2 { border-bottom: 1px solid gray; margin:0; padding:20px; } #grid { display: grid; grid-template-columns: 300px 1fr; } #block1 { border-right: 1px solid gray; width:250px; margin:0; padding:25px } #franch { padding:25px; } @media(max-width:800px) { #grid{ display: block; } #block1 { border-right: none; } h2 { border-bottom: none; } } </style> <body> <h2>회화 반복 학습 프로그램</h2> <div id="grid"> <div id="block1"> <p> 회화 학습에 필요한 것들<br> <ol> <li>vocabulary 암기</li> <li>하루 1 표현 암기</li> <li>Daily check list</li> </ol> </p> </div> <div id="franch"> 프랑스어(français, 프랑스어 발음: [fʁɑ̃sɛ])는 인도유럽어족 로망스어군에 속한 언어이다. 한국어에서는 한자로 음역 약칭으로 불어(佛語)라 부르기도 한다. 프랑스어는 (프랑스 북부에서 사용되던 언어인 “오일어”의 변종으로서) 프랑스에서 생겨났다. 프랑스어는 1539년부터 프랑스의 국어로 선포되었다.[5] 2018년 기준으로 전 대륙에 걸친 약 3억 명의 화자가 프랑스어를 사용한다[1] · [6] · [2]. 은 모국어 화자이다. 2018년 기준으로 전 세계 8000만 명의 학생들이 프랑스어를 배우고 있다.[7] 프랑코포니 국제기구에 따르면, 2050년경에는 전 세계의 프랑스어 화자가 7억 명이 될 것으로 추정된다.[8] </div> </div>
14. CSS 코드의 재사용
- 디자인 수정 사항을 모든 페이지에 적용해야할 때
- 페이지가 적으면 직접 할 수는 있음 → 비효율
- 중복의 제거
- 새로운 기술 출현의 근거
- style.css에 css 부분을 저장
- 모든 페이지에 style 태그 대신 link 태그 활용
<link rel="stylesheet" href="'style.css">
- 웹페이지 - 검사 - Network
- 내부적으로 어떤 파일들을 웹 서버에서 다운로드 받는지 알 수 있음
- html 파일과 css 파일을 모두 다운로드 하는 것을 알 수 있음
- 캐싱 (Cashing)
- 저장
15. 수업을 마치며
- 선택자와 속성이 가장 중요
- 공부를 멈추고 공부한 것을 활용해야 한다!!
- 공부의 효과에 감탄하자,,
- 나만의 웹사이트를 만들어보자
'웹 > CSS' 카테고리의 다른 글
| 생활코딩 WEB2 - CSS 정리 1 (1~7) (0) | 2023.10.31 |
|---|
