[ CSS ] 기초 CSS 정리

HTML에 CSS 적용하기

inline을 하거나 CSS 파일을 링크 태그를 통해 참조한다. <head> 태그 내부에 <link> 코드나 <style>코드를 작성한다.

<head>
    <link rel="stylesheet" href="styles.css">
    <style></style>
</head>

CSS Selector

Selector(선택자)를 통해 태그를 지정한다. 태그의 이름, 클래스 이름, id 이름 등을 selector로 사용할 수 있다. 태그이름은 이름 그대로 사용한다. 클래스 이름은 앞에 (.)을 붙여서 사용한다. 아이디 이름은 앞에 (#)을 붙여서 사용한다.

h1 {

}

.myClass {

}

#myId {

}

선택자로 태그를 지정을 했으면 중괄호 내부에 속성(property)를 부여한다. 속성은 속성 이름과 속성값으로 구성된다. 필요한 속성은 검색을 통해서 확인한다.

h1 {
    font-color : tomato;
}

예에서 속성은 font-color : tomato; 이다.

CSS 코드의 우선순위

동일한 태그에 대해 두개의 CSS 코드가 존재한다면 어느 게 우선적으로 적용될까?

h1 {
    font-color : tomato;
}

h1 {
    font-color : blue;
}

정답은 가장 마지막에 작성 된 코드다. 웹페이지의 속성을 예측할 때 CSS의 우선선위를 기억하자.

Block vs Inline

태그는 다른 태그의 배치에 따라 블럭과 인라인으로 구분할 수 있다. 블럭은 주변에 태그를 허용하지 않는 태그다. 인라인은 주변에 태그를 허용하는 태그다. 예를 들어 <span> , <a> 등이 인라인 엘리먼트다.

<div>Hello</div>
<span>Hello</span>
<a href="https://www.google.com">Go to google</a>

블럭 요소는 선언 시 width, height 스타일을 입혀야한다.

div {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
}

margin

경계로부터 바깥쪽으로 향하는 공간

div {
    margin: 1px 2px 3px 4px; /* 상 , 좌, 하, 우 */
    margin: 10px 20px; /* 상하, 좌우 */
    margin-left: 2px;
}

앞에서부터 시계방향 순으로 margin의 크기를 결정한다. 따로 방향을 지정해서 마진을 설정할 수 있다.

padding

경계로부터 안쪽으로 향하는 공간

div {
    padding: 1px 2px 3px 4px; 
}

내용은 마진과 동일하다.

collapsing margin

두 요소의 상하 경계가 겹쳐질 때 발생하는 현상으로 margin을 공유하게 된다. 더 큰 margin이 전체의 margin을 결정한다.

div1 안에 div2가 배치되어 있다.

<div class="div1"> 
    <div class="div2"> </div>
</div>

div1과 div2는 상하경계를 공유한다. 전체 margin은 80px로 결정된다.

.div1 {
    height: 100px;
    margin: 20px 30px;
}

.div2 {
    height: 100px;
    margin: 80px 30px;
}

border

요소의 경계에 스타일을 입힌다.

div {
    border: 2px solid black; /* 굵기, 스타일, 색 */
}

inline: margin, padding

inline 요소는 width 와 height가 없다. block 과 달리 margin up, down이 없다. 정리하면 inline요소는 margin-left, margin-right와 padding만 존재한다.

span {
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px 20px 30px 40px;
    margin: 30px; /* top, bottom이 없어서 적용이 안되고 left, right만 적용 됨 */
}

inline block

안쓴다. flexbox를 쓴다.

flexbox

요소들간의 공간 분포와 alignment속성을 제어하는 1차원 레이아웃 모델

<body>
    <div id="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

부모 요소를 flexbox 컨테이너로 만들고 속성들을 통해 자식 요소들의 공간 배치 등을 제어할 수 있다.

#parent {
    display: flex; /* flexbox로 만들기  */
    justify-content: center; /*  */
    align-items: center;
}

.child {
    width: 100px;
    height: 100px;
}

flexbox는 축이 2개 존재한다. 하나는 main axis, 다른 하나는 cross axis이다. main axis는 flexbox의 방향을 결정한다.

display: flex;
flex-direction: row;

기본값은 row이다. row 외에 column, row-reverse, column-reverse가 존재한다.

화면의 크기를 줄이거나 늘릴 때 요소들의 경계들이 만날 때가 있다. 만나게 된다면 요소들을 축소시킬 수도 있고 다음 줄로 넘길 수도 있다.

flex-wrap: no-wrap; /* 기본값 */
flex-wrap: wrap;

position

position은 요소의 위치를 결정하는 속성이다. position이 가질 수 있는 값으로 static, fixed, absolute, relative가 있다. 기본값은 static이다.

fixed

요소들은 하나의 레이어를 공유하고 있다. 하지만 position을 설정하면 자기 고유의 레이어가 만들어진다. 고유의 레이어가 만들어지면 서로 분리된다. 종이가 겹쳐지는 것과 비슷하다. 화면을 기준으로 위치가 고정된다. 스크롤을 움직일 때 화면상에서 요소가 그 위치 그대로 지킨다. 즉, 화면을 어디로 옮겨도 요소가 그 위치에서 보인다.

.div1 {
    background-color: teal;
    position : fixed;
}

.div2 {
    background-color: tomato;
}

relative

요소들은 처음 생성 된 위치를 기준으로 약간씩 이동할 수 있다. position 값에 relative를 부여한다.

#div1 {
    position: relative;
}

relative가 부여되면 top, bottom, left, right 속성을 활용해서 요소의 위치를 움직일 수 있다.

#div1 {
    position: relative;
    top : 5px;
    left : -2px;
    right : 10px;
    bottom: 16px;
}

absolute

요소들은 가장 가까운 직계 부모와의 관계에서 위치를 정할 수 있다.

<div id="div2">
    <div id="div3"></div>
</div>

부모는 반드시 relative이어야 한다.

#div2 {
    background-color: brown;
    height: 100px;
    width: 100px;
    position: relative;
    left: -10px; /* 본래 생성 된 위치에서 왼쪽 경계 기준으로 -10만큼 이동 */
}
#div3 {
    background-color: teal;
    height: 20px;
    width: 20px;
    position: absolute;
    left: 10px;
    top: 10px;
}

pseudo selectors

id, class, 태그 이름 외에도 태그를 선택할 수 있는 포인터다. CSS 자체로 적용할 수 있으며 html 태그들을 건드릴 필요가 없다. 참고로 selector 간에 우선순위가 있다. 자세한 건 문서를 참고해서 공부하자. 여기서는 각각의 동작만 알아보자.

nth-child

부모 요소를 기준으로 n번째 자식 요소를 선택할 수 있다.

<div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

선태자 뒤에 :nth-child()형식으로 쓴다.

div:first-child {
    background-color: teal;
}

div:nth-child(4) {
    background-color: green;
}

div:last-child {
    background-color: purple;
}

combinators

태그 간의 관계를 이용해서 요소들에게 스타일을 부여할 수 있다.

<div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <span>Hello</span>
    <p>Thay's me</p>
    <span>I O U</span>
</div>

div가 조상으로서 모든 자손 span 선택

div span {
    background-color: blue;
    color: white;
}

div가 부모로서 직계 자식 span 선택

div > span {
    background-color: aqua;
}

div가 자기 다음의 모든 형제 div 선택

div + div {
    background-color: yellow;
}

div가 와 같은 부모를 공유하는 형제 div 선택

div ~ div {
    background-color: yellow;
}

attributes selector

태그들의 속성(attibutes)들을 활용하여 선택자를 통해 스타일을 부여할 수 있다.

<form action="">
    <input type="text" required="true" placeholder="jisoo zzang" />
    <input type="text" required="true" placeholder="lisa" />
    <input type="text" placeholder="jisoo" />
    <input type="text" required="true" placeholder="jisoo love" />
    <input type="password" placeholder="jisoo" />
    <input type="text" required placeholder="jisoo my loove" />
</form>

특정 속성값을 가지는 모든 태그들을 선택하는 경우

input[required="true"] {
    background-color: pink;
}

속성값이 일부를 포함하고 있는 경우

input[placeholder~="jisoo"] {
    background-color: lightblue;
}

state selector

태그의 상태를 기준으로 태그를 선택할 수 있다.

<body>
    <button>Hello</button>
    <form action="">
        <input type="text" />
        <input type="text" />
    </form>
    <a href="https://www.google.com">Go to google</a>
</body>

태그의 상태에 따라 스타일이 바뀐다.

input:focus {
    background-color: tomato;
}

button:hover {
    background-color: blue;
}

a:visited {
    background-color: lightblue;
    color: green;
}

a:focus {
    color: lightblue;
}

form {
    border: 1px solid salmon;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

form:focus-within {
    border: seagreen 1px solid;
}

form:hover input {
    background-color: sienna;
}

form:hover input:focus {
    background-color: olive;
}

colors

CSS도 변수를 활용해서 값을 넣을 수 있다. 전역변수를 통해 값을 전달할 수 있다.

<body>
    <div id="america"></div>
    <div id="busan"></div>
    <div id="suwon"></div>
    <div id="osan"></div>
    <div id="seoul"></div>
    <div id="kenya"></div>
    <div id="borakai"></div>
    <div id="osaka"></div>
    <div id="maley"></div>
    <div id="gwangyo"></div>
    <div id="freedom"></div>
</body>

전역변수에 값을 넣는다.

:root {
    --main-color: lightblue;
}

요소의 스타일을 지정한다.

body {
    height: 100vh;
    margin: 50px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

div {
    height: 100px;
    width: 100px;
}

#america {
    background-color: greenyellow;
}

#busan {
    background-color: var(--main-color);
}

#suwon {
    background-color: grey;
}

#osan {
    background-color: orangered;
}

#seoul {
    background-color: grey;
}

#kenya {
    background-color: darkgoldenrod;
}

#borakai {
    background-color: purple;
}

#osaka {
    background-color: red;
}

#maley {
    background-color: aquamarine;
}

#gwangyo {
    background-color: var(--main-color);
}

#freedom {
    background-color: whitesmoke;
}

저작자표시 비영리 변경금지