데일리 오늘의 학습 글서식
하위선택자 지정(자손선택자)
section ul
자식선택자 지정
section>ul
선택자 우선순위 지정 ***꼭참고하기
(css 명시도 계산법)
https://www.nextree.co.kr/p8468/
css 선택자 연습
(검색창 css cook)
css레이아웃
요소는 원래 위>아래, 좌>우로 배치
-Emmet-...(자동완성 식)
div.parent>div.child.box${$}*5
----->
<div class="parent">
<div class="child box1">1</div>
<div class="child box2">2</div>
<div class="child box3">3</div>
<div class="child box4">4</div>
<div class="child box5">5</div>
</div>
레이아웃
flex 레이아웃***
/*flex 레이아웃
display : flex 자식들을 플렉스 방식으로 배치하겠다.
자식은 cascading되지 않는다
flex-direction 자식들을 배치하는 방향
row 수평배치, 기본값
column 수직배치*/
flex 안먹을땐 높이지정하기 ( 단위: vh)
flex는 마진도 먹는다.
/*flex방식은 두개의 축이 생성된다 (main축 , cross축)
justify-content: center; /*주축(main) 방향 정렬*/
align-items: center; /*반대축(cross) 방향 정렬*/
-main축:자식들의 정렬방향
-cross축: 정렬방향과 반대*/
★★★★★★★★★★★★★★★★★★★★★★
.child{
width:300px; height: 100px;
}
.parent{
height:100vh; border:1px solid black;
display: flex; flex-direction: row;}
.box1{
background-color: red;
}
.box2{
background-color: green;
}
.box3{
background-color: violet;
}
.box4{
background-color: fuchsia;
}
.box5{
background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child box1">1</div>
<div class="child box2">2</div>
<div class="child box3">3</div>
<div class="child box4">4</div>
<div class="child box5">5</div>
</div>
레이아웃
인라인블록 버려
플롯 원래목적대로
플렉스 좌우 위아래 배치
포지션 내가원하는 임의의 위치 가져다놓자(픽셀단위 좌표 / 요소들 겹치게 하는것)
position static(기본) absolute(절대) 와 relative(상대) 속성
<!--요소의 position 속성은 static(위>아래 , 좌>우)
position을 relative로 지정하면 현재 자신의 위치기준으로 이동
position을 absolute로 지정하면 지금은 화면 왼쪽 상단 기준 이동
둘은 세트로 함께 사용
-->
상대속성은 자리를 비운곳을 따로 채우지않지만 절대속성은 자리를 비운곳은 자동으로 채워짐!!!
<!--이동할 요소는 absolute, 이동할 요소의 부모는 relative
absolute는 static이 아닌 부모기준으로 이동한다
부모가 static이면 조부모->증조부모 순으로 static이 아닌 요소를 찾는다
static이 아닌 조상이 없으면 화면 기준으로 이동한다--!>
<!--어떤 요소를 일정한 범위내에서 움직이고 싶을때에는 요소에 앱솔루트 걸고
요소부모 div 를 렐러티브 걸어서 묶어놓기 --!>
ex)
#search{
position:absolute; right:20px; top:40px;
}
header{
position:relative;
width:800px;
height: 100px;
margin: 0 auto;
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
사진에 아이콘 겹치기
아이콘사이즈는 폰트사이즈로 조정
아이콘 퍼오기 링크는 w3cs 아무거나 눌러서 링크렐만 가져오기
아이콘은 구글검색창에 "fontawesome 4.7" 구글링하기
링크:https://fontawesome.com/v4/icons/
오늘의 주제: flex 속성과 float속성 position absolute 와 relative속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><style>
</style>'인천일보아카데미 > - 학습일지' 카테고리의 다른 글
| [학습일지]JAVA교육일지 20일차 (0) | 2022.05.31 |
|---|---|
| [학습일지]JAVA교육일지 19일차 (0) | 2022.05.31 |
| [학습일지]JAVA교육일지 17일차 (0) | 2022.05.30 |
| [학습일지]JAVA교육일지 16일차 (0) | 2022.05.29 |
| [학습일지]JAVA교육일지 15일차 (0) | 2022.05.29 |
