끵뀐꿩긘의 여러가지

[부스트코스]웹 프로그래밍 10. CSS(4-CSS layout스타일 속성) 본문

부스트코스 - 웹/1. 웹 프로그래밍 기초

[부스트코스]웹 프로그래밍 10. CSS(4-CSS layout스타일 속성)

끵뀐꿩긘 2020. 2. 14. 18:15

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

 


Comments