2023. 11. 23. 09:50ㆍ1단계) 쌩초보 코딩 HTML,CSS
복습
h2가 광범위하게 쓰기 때문에, 보통 이것도 광범위하다. 그래서 class를 자주 사용한다.
class 안에있는 h2를 자세하게 효과를 주고싶으면 .m-box h2 {___} 쓰면된다.
class 를 이용하면 동일한 디자인을 다른 내용에도 붙여줄 수 있다.
span 태그는 스페이스 바 기능을 대체하는 것 같다. 그리고 css 이용해서 꾸며주는 역할이 있다.
영역
파란색 auto 영역 -> inline
h1 은 화면을 좁히면 자기 공간 안에서 자유롭게 자동 조절됨, span은 화면을 좁히면 서로 겹침
padding은 글자크기 이상의 공간에 색을 입힐 수 있을 사이즈를 조정하는 기능이다.
border-radius 모서리 부드럽게
원의 반경을 의미함, (같은색 테두리 선 굵기)
text-decoration : mone
->
(마우스 올리면 MDN referance 뜸, 접속) '시도해보기' 메뉴 틀릭, 그럼 다양한 예시들이 나옴
'구문' 저네 내용 넣을 수 있는 부분 나옴
백스페이스 쓰면, 컬러값 넣을 수 있음.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
반응형 웹페이지 만드릭 148p
-모니터에서 보는 웹과 모바일에서 보는 웹을 두가지 모습을 만들 수 있다.
@media
-너비가 1280 이하 화면에서는 배경이 핑크색
-너비가 600이하인 화면에서는 배경이 올리브색
제작 순서
2. css 먼저 만들어도되고, body 먼저 만들어도됨
3. styel3 만들어서 head에 link를 연결추가함
여기까지 결과
css 파일에
만들어서 배경 컬러를 추가했으나,
반응형 태그안에 배경 태그를 추가할 수 있기 때문에,
@media(max-width: 1280px)
안에 background를 추가한다.
151p
/*680~ 1280 화면에서만 배경색이 표시.*/
@media (max-width : 1280px) {
body
{ background-color: cornflowerblue;}
}
/*.0~680 화면에서만 배경색이 표시*/
@media(max-width: 600px) {
body {
background-color:blueviolet;
}
}
1280
680
/*max-width를 사용하면 미디어 쿼리 영역 밖에 사용하면
기존에 배경 컬러 설정은 무시되고 전체 적용된다.*/
모든 코드는 위에서 아래로 읽는데, 아래내용이 우선시는 경우가 있다.
우선순위.
/*우선순위 : 좁은범위가 1순위, 즉 600영역 내용이 먼저 나오고
그 뒤에 1280영역 내용이 전개된다*/
챕터 9. css레이어 154p
플렉스박스를 많이 이용한다.
플렉스-유연한
플렉스박스 : 더 다양한 레이아웃을 만들기 위해 생긴 기법
div {__} 는 대부분 레이아웃의 크기를 동일하게 설정할 수 있다. (따로 설정하려면 추가로 태그 설정해야한다.)
tip) 커서 깜빡일 때 , 한줄만 복사할 때 블록설정 안해도 ctrl+c,v 해서 복사가 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>레이아웃 플렉스</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<div></div>
<div id="second"></div>
<div></div>
</body>
</html>
div {
width: 200px;
height: 200px;
background-color: tomato;
}
div는 block 요소이고, 전체를 차지함. 그래서 연달아 사용하면 새로 방향으로 출력됨
잘 정렬되기 위해 플랙스 태그를 사용 (css안에)
block영역에 div를 쓰면 새로로 색깔 배열이된다.
초록색이 있는 이유는 second 값에 초록색이 있기 때문이다.
css에 추가로
#second {
background-color: seagreen;
}
추가 결과
/*flex를 이용하면 하위영역들을 정렬시킬 수 있다.*/
body {
display : flex
}
div {
width: 200px;
height: 200px;
background-color: tomato;
}
#second {
background-color: seagreen;
}
맨 위에 추가로 body에 display : flex 추가하면 (가로방향)
반드시 상위영역에 flexbox 영역한다. 하위영역에는 설정이 안된다.
주축정렬하기 : 158~159p (책 참고,정보 따오기)
justify-content
- flex-start : 시작부분에 정렬
- flex-edn : 끝에 정렬
- center : 중앙에 정렬
- space-betwwen : 각 요소 사이에 공간있게 배치 , 맨 끝에는 공간 없음
- space-around : 각 요소 사이에 공간있게 배치 , 맨 끝에도 공간있음
이런식으로 사용
class 박스 적용시 상위영역에 적용
그래서 상위 영역인 ul 먼저 적용한다
a 영역 color 설정을 지우고, 맨 상위영역에
추가하면
ul {
display: flex;
list-style: none;
justify-content: center;
background-color: black;
}
li {
margin: 10px;
}
a {
text-decoration: none;
}
--------------------------------------------------------------------------------------------------------------------------------------
총정리
1123 미디어쿼리와 플렉스박스
챕터8 148p
반응형 웹페이지 - 미디어 쿼리
/*680~ 1280 화면에서만 배경색이 표시.*/
@media (max-width : 1280px) {
body
{ background-color: cornflowerblue;}
}
/*.0~680 화면에서만 배경색이 표시*/
@media(max-width: 600px) {
body {
background-color:blueviolet;
}
}
/*max-width를 사용하면 미디어 쿼리 영역 밖에 사용하면
기존에 배경 컬러 설정은 무시되고 전체 적용된다.*/
/*우선순위 : 좁은범위가 1순위, 즉 600영역 내용이 먼저 나오고
그 뒤에 1280영역 내용이 전개된다*/
미디어 쿼리를 이용해서 화면의 크기에 따라 디자인을 다르게 넣을 수 있다
크기를 지정하는 방법: max-width __px 이하일때 들어갈 디자인
챕터 9 154p
plex : 레이아웃 정렬기능
(HTML)
<body>
<div></div>
<div id="second"></div>
<div></div>
</body>
(CSS)
/*flex를 이용하면 하위영역들을 정렬시킬 수 있다.*/
/*반드시 상위영역에 flexbox 영역한다. 하위영역에는 설정이 안된다.*/
body {
display : flex;
justify-content : space-around;
}상위영역인 body에 plex를 넣어 하위영역인 div를 정렬시킨다.
*플렉스를 사용해서 네브바를 만들 수 있다.
네브바 : 홈페이지 가장 위에 이동할 수 있는 링크의 모음
활용예시
'1단계) 쌩초보 코딩 HTML,CSS' 카테고리의 다른 글
| 보충학습 input 속성들 설명 (3) | 2023.11.26 |
|---|---|
| 2023.11.24 [css이용한 반응형 웹페이지2] (2) | 2023.11.24 |
| 2023.11.22 [css시작2] (1) | 2023.11.22 |
| 2023.11.21 [css 시작1] (2) | 2023.11.21 |
| 2023.11.20 [상자박스 및 메뉴판 만들기2] (2) | 2023.11.20 |