UMC_Web 2주차
핵심 키워드 🎯
- CSS
- html과 css
- CSS선택자
- CSS 속성
- border, padding, margin, display, position (중요)
CSS 란?
html로 이루어진 웹페이지를 꾸며주는 역할을 함.
<link rel="stylesheet" href="./style.css">
현재 폴더내의 style.css를 사용
상대경로 / 절대경로 차이 알아두기
CSS 선택자
/ { css 속성 : value } /
/ 태그, 클래스, id+ 를 사용하여 속성에 value 지정 /
div{
width: 100px;
height: 100px;
margin: 10px;
font-size: 30px;
background-color: blue;
}
<div class="lightblue">1</div>
<div class="red lightblue">2</div>
.lightblue{
background-color: lightblue;
}
.red{
background-color: rebeccapurple;
}
css는 아래에 있는것이 제일 늦게 반영됨.
id선택자 #, class선택자 .
id는 하나만 사용, class는 여러개 사용 가능
우선순위 id > class == 가상 선택자 > tag 순서
.lightblue{
background-color: lightblue ! important;
}
!important로 우선순위 땡길 수 있음
가상 선택자(active, hover, focus)
특정 태그에만 지정가능한 것도 있음 (focus)
div:hover{
background-color: gray;
}
input:focus{
background-color: brown;
}
CSS 속성
여러가지 CSS 속성 mdn
블록 태그 : p, div, ul, li, h1~h6
인라인 태그 : span, a, img, button
등등..
p, span{
width: 100px;
height: 100px;
background-color: coral;
}
인라인 태그인 span에는 width, height가 적용되지 않는다.
p{
display: inline;
}
디스플레이를 inline, inline-block으로 바꿀 수 있음
p:nth-child(7){
/* display: none; */
margin: 20px 10px;
}
nth-child(7)이란 p가 아닌 태그도 카운트를 하는 듯
7번째 P태그의 마진을 변경하는 소스
마진과 패딩의 차이란?
p:nth-child(7){
/* display: none; */
margin: 20px 10px 50px 60px;
padding: 10px;
border : 5px solid blue;
border-left-width: 14px;
box-sizing: border-box;
}
Margin 은 위 오른쪽 아래 왼쪽 (시계방향)
border-box : padding + border + content가 width, height로 맞춰짐
단위 : %, em(부모에 대하여), rem(루트에 대하여) 상대단위, px 은 절대단위
선택자 상속 :
<div> // 1
<ul> // 2
<li></li> // 3
<li class="orange"></li> // 4
<li></li> // 5
<li></li> // 6
</ul>
</div>
- li.orange {} : li와 .orange가 동시에 일치되어야 선택됨 (일치 선택자) → 4
- ul > li {} : ul의 자식인 li를 전부 선택됨 (자식 선택자) → 3, 4, 5, 6
- div .orange {} : div속에 있는 모든 선택자 중에서 .orange가 선택됨 (후손(하위) 선택자) → 4
- .orange + li {} : .orange다음에 오는 형제 li 1개가 선택됨 (인접 형제요소 선택자) → 5
- .orange ~ li {} : .orange다음에 오는 형제 li가 모두 선택됨 (일반 형제요소 선택자) → 5, 6
<div>
<span>1000</span>
</div>
html{
font-size: 16px;
}
div{
font-size: 1.5rem;
}
div span{
font-size: 1.2em;
}
이러한 식으로 적으면 div span의 텍스트 사이즈는 28px이 됨
반응형 웹페이지를 위해 px 보다는 em, rem을 사용하자
브라우저마다 각각의 userstylesheet을 가지고 있음.
reset css를 하여 브라우저가 가진 스타일을 초기화 가능
*{}을 사용하여 margin과 padding을 없앨 수 있음
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
인라인 블럭의 태그와 태그사이 에는 어쩔수 없이 공백이 들어감
이를 해결하기 위해서는 flexbox 사용
Flex Box
부모태그인 Flex Container에 디스플레이 태그를 flex로 지정한다.
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
</div>
.flex-container{
background-color: teal;
height: 100vh;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: baseline;
flex-wrap: nowrap;
align-content: space-between;
}
-------css-------------
.flex-item{
background-color: tomato;
width: 100px;
height: 100px;
border: 3px solid black;
font-size: 30px;
font-weight: bold;
}
.flex-item:nth-child(3n){
flex-grow: 2;
flex-shrink: 3;
}
.flex-item:nth-child(4n){
flex-grow: 3;
flex-shrink: 2;
}
main axis와 cross axis는 서로상하관계 flow-direction으로 바뀔 수 있음.
반응형 웹 페이지에 최적화 되어있음.
속성
-
flex-direction
flex 아이템 방향
- row(default): 좌에서 우로
- row-reverse: 우에서 좌로
- column: 위에서 아래로
- column-reverse: 아래에서 위로
-
flex-wrap
다음 화면으로 넘어갈지 안넘어갈지
default : flex-wrap: nowrap
-
justify-content
-
align items
-
align contents
-
flex-grow
-
flex-shrink
Flex 연습 FlexFroggy
Flex 정리 사이트
Css 선택자 연습
position
- absolute
- relative
- fixed
- sticky
- static
실습 체크리스트✅
- CSS
- border :
- padding :
- margin :
- grid와 flex의 차이점 :
- absolute, static, fixed, relative의 차이점 :
논의해보면 좋은 것들 🔥
- 한 사이트에서 html과 CSS가 어떻게 maping되는지 알아보기 (브라우저의 개발자 도구 사용)
- position의 값들(absolute, inherit, relative)를 직접 html에 적용해보고 익히기
Author And Source
이 문제에 관하여(UMC_Web 2주차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cksgodl/UMCWeb-2주차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)