🎨 CSS 1 | CSS layout (display, position)

CSS

🎨 CSS 1 | CSS layout (display, position)

grasinnong 2021. 12. 16. 22:48

CSS (Cascading Style Sheets)

CSS는 Cascading Style Sheets의 약자이다. html이 웹페이지의 content를 담당하고, javascript가 웹페이지의 동적인 요소들을 담당한다면, css는 웹페이지를 아름답게 만들어주는 역할을 담당한다.

웹페이지가 스타일링 될 때는 아래 3가지를 참고한다.

1. Author style : 내가 작성한 style sheets. (.css파일)

2. User Style : 사용자가 스타일하는 것(다크모드, 글자 크기 설정 등)

3. Browser : 브라우저 상에서 기본적으로 지정된 스타일.

그리고 우선순위를 가지는데 기본적으로 내가 작성한 style sheets인 author style이 1순위, user style이 2순위, 마지막으로 browser가 3순위이다. 우선순위는 어떤 것을 먼저 참고하는가를 의미한다. 먼저 1순위를 바탕으로 참고하고 1순위가 없다면 다음 것을, 그리고 그 다음 것을 참고하는데, 이러한 과정을 Cascading이라고 한다.

하지만 !important 키워드를 사용해서 스타일을 지정하면, 우선순위들은 무시되고 1순위를 가진다.

p {
  color : red; !important;
}

하지만 이러한 패턴은 질서를 어지럽히기 때문에 !important 사용을 지양해야 한다.

Selectors(선택자)

선택자는 html 에서 어떤 코드를 꾸밀 것인지 선택할 수 있도록 해주는 문법이다.

* {
  color : blue;
}

* 는 모든 태그를 선택하는 선택자이다.

div {
  color : blue;
}

특정 태그를 선택자로 지정하면 태그에 스타일이 주어진다.

#name {
  color : blue;
}

id 값이 name인 태그가 선택된다. #은 id선택자이다. 태그를 선언할 때 id 값을 주면 id선택자를 사용해서 스타일을 줄 수 있다.

.class {
  color : blue;
}

class 가 class인 태그가 선택된다. 태그를 선언할 때 class값을 주면 class선택자를 사용해서 스타일을 줄 수 있다.

button:hover{
  color : blue;
}

상태값을 주려면 : 을 사용하면 된다. 위의 코드는 button의 상태가 hover일 때(버튼에 마우스가 올려져 있을 때) 글자 색이 파란색으로 변하는 코드이다.

a[href="https://example.org"]{
  color : blue;
}

[] 는 특정 속성을 지정할 수 있다. a 태그 중에서 링크 주소가 example.org 인 것을 선택하고 있다.

이 외에도 많은 선택자들이 있다.

CSS Selectors Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

그리고 선택자에도 우선순위가 있다.

1. !important 선택자

2. html 태그 안에 넣는 인라인 스타일

3. id 선택자

4. class 선택자

5. 속성 기반 선택자

6. 태그 선택자

7. 전체 선택자

같은 선택자끼리는 나중에 쓰여진 코드로 덮어 씌워진다.

CSS 레이아웃 #1 Display

css 레이아웃에서는 display와 position이 중요하다.

index.html

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="style.css">
        <title></title>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>

        <span></span>
        <span></span>
        <span></span>
    </body>
</html>

div의 경우 기본적으로 block level이고, span의 경우 inline level 태그이다.

style.css

div, span{
  width : 80px;
  height : 80px;
  margin : 20px;
  background-color : blueviolet;
}

실제 화면에서는 div 태그만 렌더링 되었다.

span 태그의 경우는 안에 content 가 없으면 화면에 출력되지 않는 inline level이기 때문이다. span 태그는 content 에 따라 박스의 크기가 조절된다.

div 태그의 경우 각각의 div 태그들이 한 줄을 차지하고 있는 것을 볼 수 있다.

하지만 span 태그의 경우, content의 양만큼 공간을 차지하고 있다.

span을 inline-level에서 block-level로 바꾸고 싶다면 display 속성을 주면 된다.

style.css

div, span{
    width : 80px;
    height : 80px;
    margin : 20px;
}

div{
    background-color: blueviolet;
}

span{
    background-color: aqua;
    display : block;
}

div 역시 block level에서 display를 변경해줄 수 있다.

style.css

div, span{
    width : 80px;
    height : 80px;
    margin : 20px;
}

div{
    background-color: blueviolet;
    display : inline-block;
}

span{
    background-color: aqua;
    display : block;
}

이제 display 값을 inline-block 에서 inline으로 바꿔보자.

style.css

div, span{
    width : 80px;
    height : 80px;
    margin : 20px;
}

div{
    background-color: blueviolet;
    display : inline;
}

span{
    background-color: aqua;
    display : block;
}

앞에서 말했듯이, inline의 경우는 content 자체를 꾸며주는 속성이기 때문에 content가 없다면 화면에 출력되지 않는다. inline-block의 경우는 content에 상관없이 하나의 block(상자)으로 처리되는데 inline으로 한 줄에 여러개의 block이 들어가게 된다.

CSS 레이아웃 #2 Postion

index.html

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="style.css">
        <title></title>
    </head>
    <body>
    <article class="container">
        <div></div>
        <div class="box">I'm Box</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        </article>>
    </body>
</html>

style.css

div {
    width : 50px;
    height : 50px;
    margin : 20px;
    background-color: red;
}

.container{
    background-color: blueviolet;
}

.box{
    background-color: aqua;
}

container라는 class를 가진 article 태그 안에 여러개의 div 태그들이 들어있는 구조이다. 그리고 div 태그들 중 하나에 box라는 class를 주었다.

div태그의 크기는 width 와 height으로 변경할 수 있는다. 마찬가지로 div태그의 위치는 top, left, right, bottom 속성을 사용해서 변경할 수 있다.

container의 위치를 변경해보자.

style.css

div {
    width : 50px;
    height : 50px;
    margin : 20px;
    background-color: red;
}

.container{
    background-color: blueviolet;
    left : 20px;
    top : 20px;
}

.box{
    background-color: aqua;
}

container를 위에서부터 20px, 왼쪽으로부터 20px 이동시켰다. 하지만 화면 안의 container의 위치 변화는 없다.

position 속성의 기본 값이 static이기 때문이다. position 속성 값을 지정해주지 않았을 때도(처음 예제) div 박스들이 맨 왼쪽, 그리고 위쪽부터 차례로 화면에 보여졌다. 이 속성값이 static이기 때문이다.

container의 위치를 바꾸기 위해서는 position의 값을 바꿔줘야 한다.

style.css

div {
    width : 50px;
    height : 50px;
    margin : 20px;
    background-color: red;
}

.container{
    background-color: blueviolet;
    left : 20px;
    top : 20px;
    position : relative;
}

.box{
    background-color: aqua;
}

container를 기준으로 위쪽, 왼쪽에 틈이 생긴 것을 볼 수 있다(20px 이동).

박스도 위치를 똑같이 바꿔보자.

style.css

div {
    width : 50px;
    height : 50px;
    margin : 20px;
    background-color: red;
}

.container{
    background-color: blueviolet;
    left : 20px;
    top : 20px;
    position : relative;
}

.box{
    background-color: aqua;
    left : 20px;
    top : 20px;
    position : relative;
}

원래 있던 위치에서 20px 씩 이동되었다. position의 값으로 주었던 relative는 원래 있던 위치를 기준으로 이동한다.

relative외에도 여러 값들이 있다.

https://developer.mozilla.org/ko/docs/Web/CSS/position&amp;amp;amp;amp;amp;amp;amp;nbsp;

absolute의 경우, 나를 포함하고 있는 가장 상위의 태그를 기준으로 위치가 변경된다.

style.css

div {
    width : 50px;
    height : 50px;
    margin : 20px;
    background-color: red;
}

.container{
    background-color: blueviolet;
    left : 20px;
    top : 20px;
    position : relative;
}

.box{
    background-color: aqua;
    left : 20px;
    top : 20px;
    position : absolute;
}

.box 태그의 가장 상위 태그는 class가 container인 article 태그이므로, container가 내 기준이 된다.

fixed의 경우는 아예 상자를 벗어나서 window안에서 움직인다. 웹페이지를 기준으로 이동한다.

style.css

div {
    width : 50px;
    height : 50px;
    margin : 20px;
    background-color: red;
}

.container{
    background-color: blueviolet;
    left : 20px;
    top : 20px;
    position : relative;
}

.box{
    background-color: aqua;
    left : 20px;
    top : 20px;
    position : fixed;
}

마지막으로 sticky의 경우는, 원래 위치에 딱 붙어서 스크롤을 내려도 그 위치 그대로 움직이지 않는다.

style.css

div {
    width : 50px;
    height : 50px;
    margin : 20px;
    background-color: red;
}

.container{
    background-color: blueviolet;
    left : 20px;
    top : 20px;
    position : relative;
}

.box{
    background-color: aqua;
    left : 20px;
    top : 20px;
    position : sticky;
}

[참고자료]

저작자표시 비영리 변경금지 (새창열림)