기본 개념 체크
블록 요소
- 한 줄로 영역을 차지하는 요소
- 줄 바꿈 발생
- 높이, 너비 지정 가능
- div, p, pre, h1~h6
인라인 요소
- content 부부만 영역을 차지하는 요소
- 옆으로 배치
- 높이, 너비 지정 불가능
- span, label, input, img, 글자 관련
요소 영역
- content + padding + border + margin
1. 레이아웃 스타일
display : [ inline, inline-block , block ]
기본 세팅
#1 - 클래스로 공통 스타일 적용 - .display-test
#2 - 색상 주는 클래스 스타일 미리 만들어 놓고 사용하기
1. display : inline; - 인라인 요소 특징 적용
- 블록 요소의 특징 없어지고 인라인 요소의 특징 적용
- display: inline; 을 하게 되면, width와 height 속성은 적용되지 않음
- inline으로 변경했더니 우리가 지정했던 가로/세로 크기 지정한 것이 적용 안 되는구나.
2. display : inline-block; - 인라인 요소와 블록 요소 특징 적용
- inline요소처럼 – 옆으로 배치되고
- block요소처럼 – 가로세로 크기 지정 가능하게 된다.
+@ div 사이 조금의 공간 있다.. 이 공간을 없애는 방법은?
#2-1. < div 태그 > 쭉 연결해서 써준다. ( 엔터키 없애준다.)
- inline-block 애는 엔터키 1개 이상 있으면 조금 띄어주는구나.
#2-2. font-size: 0px; 스타일 적용
- <div>들 사이에 엔터키 있어도 결과는 붙여짐
- 새로운 div로 전체 감싸주고 – class준 다음 - 스타일 지정
- 태그를 쭉 이어 써야 하는 1번 방법에 비해 가독성면에서 더 좋아진다.
3. display : block; - 블록 요소 특징 적용
- span 태그를 - block 요소로 바꾸기
- inline 요소는 너비 / 높이 반영 안 됨. 테두리만 적용됨
- display:block; 해주면 우리가 적용해주었던 너비 / 높이 적용됨!
- span 태그는 원래 inline 스타일인데 display: block; 형식으로 변경해주니
- 너비와 높이 지정해놓았던 거 적용됨을 확인
display [ inline , inline-block , block ] 끝
2. 레이아웃 스타일
position : [ relative , absolute , fixed ]
기본 세팅
- < div class="outer" > 안에 3개의 div 만들어 놓은 상태
- #outer 안에 <div> 들을 아래의 모양처럼 위치 조정해보자.
# 크기 다르게 만들기
위치 지정해보기
1. position : relative; // positon : absolute;
1-1 부모 태그에 position : realtive; 적용
1-2 자식 태그들에 positon : absolute; 적용
- position: absolute; 해주면 – 부모 태그를 기준으로 자리 잡는다.
- 그냥 부모 태그가 아니라, 조상 태그 중에서 static이 아닌 애를 기준으로 잡는다.
- static 아닌 부모 태그를 찾기위해 하나씩 올라가다가 position= relatve || absolute || fixed ;되어있는 부모 태그 중 첫 번째 만나는 부모태그를 기준으로 잡는다.
- positon: static;이 아닌 가장 가까운 조상을 기준으로 잡는다. 근데 아무도 없다면? - body태그 기준으로 위치 잡는다.
- 우리 예제에서는 부모 태그인 < div class="outer" >의 { position = "relative"; }
- 자식 <div 태그>들의 { positon = absolute } 이때 기준점은? { position = "relative"; }인 .outer 가 잡힌다.
# positon 과 top left 로 위치 조정 ( 기준점은 .outer )
# positon 과 top left 로 위치조정 ( 기준점은 .outer )
2. position : fixed; - 요소가 태어난 위치에 고정
- 고정위치
- 스크롤 움직여도 위치가 고정되어서 보인다!
- # 태어난 위치 / 처음에 만들어진 위치에 고정된다
- 흐름에 따라서 만들어진 위치에 고정된다.
- 태어난 위치가 너무 밑이라서 안 보이면 top = 100px; 같은 조건 걸어주면 보인다.
position : relative || absolute || fixed; 끝
3. 레이아웃 스타일
[ z-index , visibility , float , clear , 가상요소 ]
1. z-index
- 요소들을 index 값에 따라 쌓는 속성
- z-index 값이 높은 순서대로 먼저 보인다.
- 값이 같으면 문서의 흐름에 따라서 나중에 적용된 것이 먼저 보임
- z-index 값 지정 전에는
- 문서 흐름에 따라 가장 나중에 적용한 빨간색 3번째 요소가 제일 앞에 보였는데
- z-index 값 지정 후에는
- z-index 값에 따라 가장 높은 z1> z2> z3 순으로 보인다.
# 주로 id = "header" 해서 많이 사용
2. visibility
- 특정 요소를 보이거나 안 보이게 하는 스타일 속성
- 2번 영역 - display : none; 해보기
- 2번영역 - visibility : hidden; 해보기
- 안 보이는 건 똑같은데 – 공간은 차지하도록 만들어주는구나~
3. float
- 페이지 내의 요소들을 화면으로부터 띄워서 ( 스티커를 떼서 새로 붙이는 느낌 )
- 왼쪽 또는 오른쪽으로 배치하는 속성
- 3-1. float : left; ------번호 체크 : 1 2 3 4 5
- 3-2. float : right; ------ 번호 체크 : 5 4 3 2 1
- #+@ - float이랑 앱솔 같이 주면 – 앱솔 적용된다.
- #+@ - float실제 사용 사례는 – list 정렬할 때 사용한다.
- 3-3 . float 한 뒤에 < div태그 > 추가해보자
- 이런 효과 주려고 만든 것이 float ! (이후에 이미지뿐 아니라 다른 요소들도 사용 가능하게 됨)
하지만 원치 않는다면?? 해결방법은?
4. clear
- clear = left / right / both
- float 속성 적용되어있는 거 없애준다.
5. 가상의 요소로 float 속성 없애주기
- body 태그 안건들이고 요소 하나 추가하기
- CSS를 이용하여 가상의 요소를 하나 만들었다.
- #t2::after
- id="t2"; 인 div태그 안에 ::after로 가상의 요소 만들어서 스타일 적용
## 가상 요소 활용법은?
- clear 해주려고 br 태그 만들어서 활용했는데
- 필요 없는 br태그를 안 쓰고 싶다.
- 가상의 요소를 만들고 가상의 요소에게 clear : both; 처리해주고 싶다.
- 이런 경우에 사용!
review
오늘 배운 레이아웃 관련 스타일들은
이해하기 좀 힘들었고
실제 어떻게 활용하는지 실습을 해봐야지
완벽히 이해할 수 있을 것 같다.
레이아웃 짜는 방법도 배우고
강사님과 같이 연습해보고
주말에 과제를 진행하며 사용해보아야겠다.
display나 position 설명해 주실 때
화면을 3차원적으로 생각해야한다고 하시며
그림이랑 예시를 들어서 설명해주셨는데
그 부분은 따로 정리해놓을 예정
어떤 사이트를 만들어 볼 것인지
어떤 레이아웃을 구성할지 정도는
미리 생각해놓기!
'Java 기반 클라우드 융합 개발자 과정 - KH 정보교육원 > 6월' 카테고리의 다른 글
| 22.06.16 - [ CSS 스타일 ] transition, transform, floot (0) | 2022.06.21 |
|---|---|
| 22. 06. 16 - [ CSS 레이아웃 ] - position, 메뉴바(ul>li>a) (0) | 2022.06.21 |
| 22. 06. 13 - [ CSS 스타일 ] 목록, 영역, 테두리, 배경 - 스타일 (0) | 2022.06.14 |
| 22. 06. 10 - [ CSS 스타일 ] 적용 방법, 글꼴 스타일, 텍스트 스타일 (0) | 2022.06.13 |
| 22.06.09 - [ CSS란? ] , [ CSS 선택자 ] - 기본, 다양한, 부모-형제, 반응, 상태 (0) | 2022.06.12 |