[CSS] CSS 기초 정리

HTML과 CSS를 만만히 보고 그냥 JS를 배우면서 웹 공부를 시작했는데 막상 웹페이지를 만들다보니 HTML과 CSS의 기초가 부족해 검색창하나 만드는데도 애를 먹었다.

 

기본적인 것들은 먼저 배우고 시작해야겠다고 생각해 HTML CSS 카테고리를 새로 만들고 공부한 내용을 기록한다.

 

오늘은 생활코딩 WEB2 CSS 수업을 다 듣고 들으며 필기한 내용을 올려두려고 한다.

출처 : https://youtu.be/Ok0bBJPtgJI

 

 

---

 

 

선택자(Selector) :

그냥 태그 이름을 적으면 해당 태그 전체를 선택하는 선택자를 사용한 것이다.

 

class를 이용해 해당 클래스의 선택자를 사용할 때는 .을 이용한다.

그런데 class는 아래와 같이 두 개의 이름을 지정할 수도 있다.

그러면 아래와 같이 속성을 지정할 수 있다.

이러면 첫 번째 a태그의 HTML이라는 글자는 회색이되고 두 번째 a태그의 CSS는 빨간색이 된다. 이렇게 된 이유는 단순히 .active가 .saw보다 뒤쪽에 있기 때문이다.(즉 순서 때문이다.)

 

 

그래서 더 큰 우선순위를 갖는 선택자를 사용할 필요가 있다.

그것이 ID 선택자이다.

그럼 아래와 같이 바꿔줄 수 있다.

ID 선택자의 경우에는 #을 사용해서 선택자를 이용한다.

 

 

그래서 태그 선택자, 클래스 선택자, ID 선택자의 우선순위를 비교하면

ID 선택자(#) > 클래스 선택자(.) > 태그 선택자

이다.

 

이렇게 작동하는데는 이유가 있다.

class는 그룹핑을 하는데 목적이 있다.

그리고 id는 고유의 표식이다.

(따라서 만약 “active”라는 id가 한번 등장하면 해당 웹페이지에서 “active”라는 id가 또 등장하면 안된다.)

(ID의 핵심은 중복되서는 안된다는 것이다.)

 

이 이유 때문에 구체적인 것을 포괄적인 것보다 우선순위를 높였고 따라서 이렇게 우선순위가 되는 것이다.

 

 

---

 

 

박스 모델이라는 것이 있다.

 

h1 태그같은 경우에는 한 줄을 통을 다 사용한다.

그치만 a 태그와 같은 경우에는 자기 콘텐츠의 크기 만큼만 사용한다.

 

HTML에 있는 여러 태그들은 그 태그의 성격과 일반적인 쓰임에 따라서 화면 전체를 쓰는 것이 편한 것과 자기 크기만큼 부피를 갖는 것이 편한 것이 있기 때문에 화면 전체를 쓰는 태그들이 몇 십 개 있고 자기 크기 만큼을 갖는 태그들이 몇 십 개가 있다.

 

화면 전체(한 줄 전체)를 쓰는 태그 : “block” (block level element (element는 태그랑 똑같은 말이다.))

자신의 콘텐츠 크기만큼을 갖는 태그 : “inline” (inline element)

 

이렇게 태생부터 block 인지 inline인지가 정해져 있지만 display라는 속성을 이용하면 이를 바꿀 수도 있다.

 

ex. a태그의 display 속성을 block으로 바꾸면 화면 전체를 쓰게 할 수 있다.

 

 

(TIP. 태그를 안보이게 하고 싶은 경우 display: none;을 해주면 화면에서 사라진다.)

 

 

---

 

 

이렇게 보면 h1과 a의 코드가 중복이 일어난다.

 

이렇게 하면 중복을 제거할 수 있다.

 

그리고 저 가운데 코드도 아래와 같이 줄여 쓸 수 있다.

(5px, solid, red의 순서는 상관없다.)

 

 

---

 

 

보면 두 h1 태그인 CSS라는 글자 테두리사이에 간격이 존재한다.

이걸 없애고 싶으면

 

margin: 0; 을 하면 된다.

 

 

---

 

 

단순히 ‘디자인하기 위해서’ 태그를 사용해야할 때가 있다.

이때 만약 h1과 같은 태그를 사용하면 h1 태그는 제목이라는 의미가 있기 때문에 이상하다.

따라서 디자인이라는 목적을 위해서 어떤 의미도 존재하지 않는 태그를 사용해야 될 때가 있다.

 

그럴 때 사용하라고 존재하는 무색 무취와 같은 태그가 바로 <div>라는 태그이다.

(division의 약자이다.)

 

그리고 똑같은 목적으로 고안된 태그가 하나 더 있는데 바로 <span> 이다.

 

차이점은 div는 block이고

span은 inline이다.

 

 

---

 

 

 

이번엔 grid라고 하는 css의 기술을 알아볼 것이다.

 

이렇게 두 개의 div태그가 있다고 하자.

 

만약 저 두 개의 div태그를 하나의 행에다가 놓고 싶다고 하자.

 

그러면 우선 두 개의 div태그를 또 다른 하나의 div태그로 묶어준다.

그리고 그 div태그에 id 속성 값을 부여한다.

 

그런 후, 그 id 속성 값을 이용해 css 속성을 부여하는데,

위에서 배운 display는 grid로 하고 grid-template-colums라는 속성을 이용해 해당 div태그 안의 태그들에 대해서 각 열에 얼마만큼의 크기를 부여할 건지를 정할 수 있다.

(display: grid; 만 하면 변화가 없다.)

 

그러면 위와 같이 바뀐다.

(1fr의 크기를 부여한 부분에는 앞에 150px을 차지하고 남은 공간 전체가 부여된다.)

 

 

이 fr을 이용하면 비율을 정할 수도 있는데 만약 2fr 1fr로 하면 아래와 같이 2:1의 비율로 열이 나뉘게 된다.

그리고 아래와 같이 두 번째 div태그의 길이가 길어지면 그것에 맞춰 전체 div 자체가 커진다.

 

(추신 : 이런 grid와 같은 기술을 사용할 때는 사용해도 되는지 안되는지 알아볼 필요가 있다. 그럴 때 www.caniuse.com 사이트를 들어가 ‘grid’ 이런식으로 검색해보면 평균적으로 몇퍼센트의 사람들이 이 기술을 통해 사이트를 구현했을 때 볼 수 있는지 확인할 수 있다.)

 

 

 

그리고 그냥 선택자를 쓰는게 아니라 부모 태그의 id를 명시하여 선택자를 쓰는게 좋다.

 

 

---

 

 

<미디어 쿼리>

 

화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것을 반응형 웹 또는 반응형 디자인이라고 한다. (Responsive Web)

 

미디어 쿼리(Media Query) : 반응형 디자인을 순수한 웹, css를 통해 구현하는 핵심적인 개념

 

현대시대에 우리는 다양한 미디어를 이용해 웹을 이용하고 따라서 웹은 다양한 크기의 화면에 맞추어 변할 수 있어야한다.

 

브라우저의 개발자 도구에서 브라우저의 크기를 조절하면 오른쪽 상단의 부분에 아래와 같이 현재 브라우저 창의 크기를 의미하는 px 값이 나온다.

이것을 보고 화면의 크기가 어떤 px 일 때 태그의 css를 변화시키는 코드를 짤 수 있다.

 

 

만약, screen의 좌우폭이 800px 보다 클 경우의 css를 변화시키고 싶다면 다음과 같이 적을 수 있다. (screen width > 800px 일 때)

그래서 다음과 같이 코드를 적으면 화면이 800px이상일 때 div태그의 display 속성이 none이 되어 화면에서 안보이게 된다.

 

 

만약 max-width를 이용하면

아래와 같은 의미이다.

 

 

---

 

 

<CSS 코드의 재사용>

 

여러개의 html 파일에 대해 각각 style 태그를 달고 css 코드를 작성하면 유지보수 측면에서 효율적이지 못하다.(공통된 style 코드를 여러 html 파일에서 사용한다고 할 때 하나의 수정사항을 위해 여러 html파일의 style 코드를 일일이 다 수정해야한다.)

 

하지만 따로 style.css 라는 파일을 만들고 <link>태그를 이용해 style.css 파일을 html파일과 연결시켜주면 하나의 css 코드만으로 여러개의 html 파일의 style을 수정할 수 있다.

 

근데 네트워크의 측면에서는 style.css라는 파일을 따로 다운받아서 처리해야하기 때문에 웹페이지 내부에 style 코드가 작성되어 있는게 효율적일 것이다.

하지만 캐싱(caching)이라는 테크닉 때문에 그렇지 않다. 캐싱은 ‘저장하다’라는 의미인데, 한 번 style.css라는 파일을 다운받았다면 파일이 바뀌기 전까지는 style.css라는 파일을 사용자의 컴퓨터에 저장해놨다가 그 다음에 style.css 파일을 요청하면 저장된 결과를 가져와서 사용하는 방식이다.

 

따라서 style.css 파일을 캐싱할 수 있게 되면 훨씬 더 빠르게 웹페이지를 보여줄 수 있으면서 네트워크 트래픽, 다시 말해 사용료를 훨씬 더 적게 낼 수 있다.

 

이렇게 코드의 중복을 줄일 수 있게 됐다.

 

 

 

선택자는 그림을 그리는 붓이고 속성은 물감이다.