이번 포스팅에서는 CSS의 속성인 너비 속성들과 요소들에게 효과를 부여해 보고, 위치지정 방식에 대해 알아보겠습니다.
CSS Width, Height 너비 요소
width, height - 요소의 가로/세로 너비
- 기본값은 auto로 지정되어 있으면 px, em, vw 등 단위로 지정 가능하다.
max-width, max-height - 요소의 최대 가로/세로 너비 지정
- 일반적으로 기본 값은 none으로 최대 너비의 제한이 없다.
- 단위는 px, em, vw 등 지정 가능하다.
- 최대로 커질 수 있는 너비를 지정해준다.
min-width, min-heigh - 요소의 최소 가로/세로 너비 지정
- 최소 너비 재한 없음, 기본 값은 0이다.
- auto로 지정하면 브라우저가 너비를 계산한다.
- px, em, vw 등 단위로 지정 가능
- 요소가 작아질 수 있는 크기를 지정한다.
Calc()
Calc()은 사용자가 원하는 크기 값을 계산하여 적용한다.
예) calc(100vh - 20vw), calc(1920px - 10vw)
※ vw(가로)와 vh(세로)는 반응형 너비로 100vw는 웹 브라우저가 가지는 100%의 가로 너비다. 따라서 vw, vh는 웹 브라우저의 크기에 따라 크기가 변경된다. 각 vw, vh의 크기는 브라우저의 크기에 따라 다르다.
예) 웹 브라우저의 총 크기가 가로 1000px 일 떄 10vw는 100px이다.
line-height
line-height는 영역 요소 내부 컨텐츠 글자의 줄 높이를 나타낸다.
box model의 크기 단위 적용 가능하다. ( font에도 적용 가능하다 )
특징 : 컨텐츠가 1줄인 경우 box height와 line height를 동일한 값으로 설정하면 세로 중앙 정렬 효과가 있다.
실습 1
위에서 배운 calc 및 line-heigh등을 이용하여 실습을 진행
- 현재 화면 가로 길이의 1/10인 길이를 변으로 하는 div정사각형
- div안에 컨텐츠를 삽입하고 가로, 세로 중앙 정렬
<div>안에 컨텐츠("실습")을 넣고, head태그 안에 <style>태그를 만들었다. 그리고 <style>태그 안에 상자가 보이도록 백그라운드 컬러를 설정해준다.
가로 너비가 전체 웹 브라우저 화면의 1/10이기 때문에 10vw를 넣어준다. 또한 정사각형을 만들기 위해 height에도 같은 값을 넣어준다.
중앙으로 이동시키기 위해 margin을 설정 "margin : 위-아래 왼-오른쪽" 형태로 넣은다. margin은 "auto" 값으로 지정해주면 가로 부분만 자동으로 계산해 주기 때문에 위-아래의 값을 따로 적어줘야한다.
위-아래의 margin은 calc()을 이용하여 중앙 값을 계산한다. (100vh - 10vw)/2를 해줘서 값을 구한다. 2로 나누는 이유는 위-아래는 두개의 값이기 때문에 위, 아래에 동일한(균등한) 값을 넣어주기 위해서다.
Border
Border는 선의 두께, 종류, 색상을 지정해 줄 수있는 요소다.
선의 두께는 border-width로 조정 할 수있다.
위와 같이 위,아래, 왼쪽, 오른쪽의 값을 따로 부여 가능하다.
선의 종류를 지정하는 요소는 border-style로 변경가능하다.
변경가능 한 선의 종류는 아래의 사진과 같다.
또한 border-style도 width처럼 각 위치마다 선의 종류를 다르게 부여할 수 있다.
border의 색상을 변경해주는 요소는 border-color 이다.
기본값은 black으로 설정되어 있다.
border-color 또한 각 부분마다 다른 색상을 부여가능하다.
"border : 선-두께, 선-종류, 선-색상; " 과 같이 사용하면 한번에 전부 표현 가능하다.
혹은 "border-top: 두께 종류 색상", "border-top-width: 두께;" 처럼 위,아래, 왼쪽, 오른쪽에만 값을 부여 가능할 수 도 있다.
실습2
border를 이용하여 자신만의 테두리를 그려보기
<body>태그 안에 <div>를 만들고 class를 mine으로 잡았다. 그리고 <Style>태그를 이용하여 class를 부르고 해당 클래스안에 요소들을 집어 넣었다.
margin을 넣어 브라우저에서 조금 떨어지게하고, border-width를 사용하여 각 위, 오른쪽, 아래, 왼쪽에 px크기를 다르게 넣어 주고 border-style도 다르게 넣어 주었다. 또한 컬러를 각기 다른색으로 부여했다.
border-radius, box-sizing
border를 보면은 사각형인 모양을 가지고 각 변끝이 뾰족하다. 이것을 변경할 수 있게 하는 것이 border-radius이다.
border-radius는 모서리 끝을 둥글게 만들어 준다.
사용법은
예시) "border-radius : 10px;", "border-radius : 0 10% 0 0"
예시 처럼 한번에 모든 꼭짓점을 지정해 줄 수 있고, 각 꼭짓점을 하나씩 부여해 줄 수 있다.
box-sizing은 요소의 크기 계산 기준을 지정해주는 요소다.
기본값은 content-box이고 요소의 내용(content)로 크기를 계산한다.
border-box로 지정하면 요소의 내용 + padding + border로 크기를 계산한다.
Opacity, Visibility
Opacity는 요소의 투명도를 변경할 수 있게 해준다.
기본값은 1로 불투명 상태이다.
0~1 사이의 소숫점 수자를 넣어서 투명도를 조정할 수 있다.
위와 같이 요소를 숨기는 3가지 방법있는데 아래와 같다.
- Opacity(투명하게 만들기) - 모습만 숨김 / 속성을 남긴다 / 기존 자리를 차지한다
- visibility : hidden - 모습과 속성을 숨기는 방법 / 자리를 차지한다
- display : none - 그냥 없애 버리는 방법 / 자리도 사라진다
실습 3
실습을 통해 위 모습들이 어떻게 바뀌는지 확인 가능하다.
숨김 요소를 사용하기 전에는 모든 박스들이 보이는 것을 확인 할 수 있다.
모든 요소를 적용 했을 때, 박스들이 사라지고 공간이 줄어든 모습을 볼 수 있다.
이것은 display : none 값을 주었기 때문에 자리고 같이 사라졌기 때문이다.
아래의 그림은 display : none 값을 지웠을 때 나오는 출력 결과이다.
display : none 요소를 적용하지 않았기 때문에 화면에 출력되고, 다른 값들은 출력 되지 않았지만 자리가 줄어 들지 않았다.
overflow
overflow - 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성이다.
값으로는
- visible - 기본값, 넘친 내용을 그대로 보여줌
- hidden - 넘친 내용을 잘라냄
- scroll - 넘친 내용을 잘라냄, 스크롤바 생성
- auto - 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
overflow-x, overflow-y로 각 x축 y축에 값을 따로 줄 수 있다.
position
CSS의 position에 대해 알아보고자 한다.
position의 종류
- static : 정적 위치 지정 방식(기본값)
- relative : 상대 위치 지정 방식
- absolute : 절대 위치 지정 방식
- fixed : 고정 위치 지정 방식
이렇게 4가지의 position 종류가 있다.
relative
relative는 상대 위치 지정 방식으로 기존 위치에서 자리를 이동 시킨다.
이동하고 기존에 있던 공간에는 아래의 다른 존재가 기존 자리로 이동하지 않고 그대로 위치해 있다.
absolute
absolute는 절대 위치 지정방식으로 위치 상 부모 요소를 기준으로 위치를 변경한다.
따라서 absolute는 부모 요소 위에 존재하기 때문에 다른 요소들과 겹쳐서 볼 수 있다.
또한 absolute를 부여 받기 전에 위치했던 공간은 다른 존재가 대신 차지한다.
부모가 위치지정 요소를 가지면 그 부모를 기준으로 잡고, 부모가 해당 속성을 가지지 않으면 더 상위 부모의 위치지정 요소를 체크하고 있으면 그곳을 기준으로 잡고 만약 최상위 부모까지 위치 지정요소가 없다면 웹 브라우저를 기준으로 위치를 잡는다.
fixed
fixed는 고정 위치 지정 방식으로 뷰포인트(브라우저)를 기준으로 배치한다.
따라서 웹 브라우저가 축소하거나 확대하면 위치도 브라우저를 따라 변경된다.
실습 4
각 <div>에 position을 부여했다.
또한 absolute가 위치지정을 가지는 부모를 기준으로 움직인다는 것을 보여주기 위해 마지막에 relative안에 absolute요소를 가진 값을 넣었다.
fixed가 고정되어 있고 스크롤을 움직이면 위치가 고정 되어 항상 같은 위치에 있는 것을 볼 수 있다.
반면 다른 것들도 고정되어 있지만 화면에 고정되어 있지 위치에 고정되어 있는 것이 아니다.
'웹 개발' 카테고리의 다른 글
| [포스코X코딩온] CSS Transform, Transition, Animation (1) | 2023.10.31 |
|---|---|
| [포스코x코딩온] CSS Background 요소와 Flex (1) | 2023.10.30 |
| [포스코X코딩온] CSS 선택자와 속성, inline-block (1) | 2023.10.27 |
| [포스코X코딩온] CSS 기본 개념과 사용법 (1) | 2023.10.26 |
| [포스코X코딩온] HTML 태그 사용법과 활용 (2) | 2023.10.25 |