일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 브라우저
- 백준
- 웹서버
- 웹프로그래밍
- request
- SERVLET
- Kruskal's Algorithm
- BJ
- 벡엔드
- jsp
- 순열 알고리즘
- 프림 알고리즘
- mysql
- mst
- 다이나믹 프로그래밍
- 해시
- 소수
- 웹 프로그래밍
- 그리디
- DP
- greedy
- 크루스칼 알고리즘
- programmers
- dbms
- 정렬 알고리즘
- 정렬
- Prim's Algorithm
- 프로그래머스
- 네이버 부스트캠프 ai tech
- 부스트코스
- Today
- Total
끵뀐꿩긘의 여러가지
[부스트코스]웹 프로그래밍 10. CSS(4-CSS layout스타일 속성) 본문
HTML의 여러 태그들의 기능을 알아보았듯이 CSS의 여러 속성들을 알아보겠습니다.
- width, height 속성
- margin, padding 속성
- display 속성
- float 속성
- position 속성
width, height 속성
width와 height 속성은 각각 가로 길이, 세로 길이를 의미합니다.
값을 정의 할때는 “100px” 처럼 숫자 뒤에 단위를 표시하여 적습니다.
(px는 픽셀 이라는 의미의며 ‘50%’ 처럼 ‘%’ 단위를 사용 할 수도 있음)
ex)
#box{
width: 100px; height: 60px
}
margin, padding 속성
margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다.
width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다.
margin과 padding는 border 을 경계로 나뉩니다.
방향
방향마다 여백을 다르게 설정할 수 있습니다.
- margin: 20px 같은 표현은 상하좌우 모두 20px을 의미합니다
- margin: 30px 10px은 상하 30px, 좌우 10px을 의미합니다.
- margin: 30px 10px 20px 50px은 위 30px, 오른쪽 10px, 아래 20px, 왼쪽 50px을 의미합니다.
- margin: 30px 10px 40px은 위 30px, 좌우 10px, 아래 40px을 의미합니다.
즉 방향의 위부터 시계방향으로 회전하여 위 오른쪽 아래 왼쪽 순서로 설정합니다.
ex)
#box{
margin: 10px;
padding: 20px
}
*주의사항
width를 200px로 설정했다고 할지라도 전체 너비가 200px이 되는 것이 아닌, 여기에 padding과 border-width가 더해져서 그려지게 됩니다.
전체길이 = width + padding + margin
전체높이 = height + padding + margin
display 속성
display 속성은 요소를 어떻게 보여줄지를 결정합니다.
주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다.
- none : 보이지 않음
- block : 블록 박스
- inline : 인라인 박스
- inline-block : block과 inline의 중간 형태
https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1
none, block, inline, inline-block 속성을 자세히 설명해 놓은 사이트입니다.
float 속성
개요
float 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.
- inherit: 부모 요소에서 상속
- left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
- right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.
- none - 요소를 부유시키지 않음
left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외)
또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니다.
ex)
.content > img{
float: left
}
position 속성
position 속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖습니다.
- static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다.
- absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.
- relative: 원래 있던 위치를 기준으로 좌표를 지정합니다.
- fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.
- inherit: 부모 태그의 속성값을 상속받습니다.
좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 사용합니다.
position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 됩니다.
ex)
#box1 {
position:static
}
#box2 {
position:absolute
}
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
CSS 포지션 속성에 대해 잘 설명해 놓은 사이트입니다.
참고: https://www.edwith.org/boostcourse-web/lecture/16677/
[LECTURE] 5) Element가 배치되는 방법(CSS layout) : edwith
들어가기 전에 CSS의 배치를 위해서는 중요한 여러 가지 개념을 알고 있어야 합니다. 그중에서 block과 inline의 차이 그리고 position 속성을 이해해야 합니다. 또한... - 부스트코스
www.edwith.org
https://www.edwith.org/boostcourse-web/lecture/16678/
[LECTURE] 5) Element가 배치되는 방법(CSS layout) : edwith
들어가기 전에 CSS의 배치를 위해서는 중요한 여러 가지 개념을 알고 있어야 합니다. 그중에서 block과 inline의 차이 그리고 position 속성을 이해해야 합니다. 또한... - 부스트코스
www.edwith.org
https://ofcourse.kr/css-course/
Redirecting…
ofcourse.kr
'부스트코스 - 웹 > 1. 웹 프로그래밍 기초' 카테고리의 다른 글
[부스트코스]웹 프로그래밍 12. Servlet(1) (0) | 2020.02.21 |
---|---|
[부스트코스]웹 프로그래밍 11. 개발환경 설정하기 (0) | 2020.02.21 |
[부스트코스]웹 프로그래밍 9.CSS(3 - 기본스타일 속성) (0) | 2020.02.14 |
[부스트코스]웹 프로그래밍 8.CSS(2) (0) | 2020.02.14 |
[부스트코스]웹 프로그래밍 7.CSS(1) (0) | 2020.02.14 |