[HTML/CSS] CSS Basic 🌷

Shin Hyun Woo·2022년 4월 1일

멋쟁이사자처럼🦁

목록 보기

12/40

오늘의 강의는 특강으로 이루어졌다.
특강을 진행하는 강사님은 무려 유튜브채널 "빔캠프"의 이종찬 강사님!

한창 국비학원에서 CSS를 배울 때 종종 보던 유튜브의 그 강사님께서 우리에게 특강을 오시다니?!
강사님께서 가르쳐주시는데 유튜브 영상을 보는 것처럼 똑같으셔서 너무 신기하고 재미있었다. 특별하고 정말 재밌는 강의였기도 하지만 너무 인상깊었던 강의인 것 같아 시간이 너무 빨리 갔다. 😢
한번 더 오셨으면...(제발...)

오늘의 특강은 이종찬 강사님의 트레이드 마크인 CSS 특강!
역시 CSS에 장인이신 강사님께서 가르쳐 주시니 너무 영광이였다! 🤩
이제부터 강사님이 가르쳐주신 모든 것을 정리해보자!

프로필 꾸미기 😎

우리가 강의를 들으면서 만들어야하는 것은 "프로필 꾸미기"였다.
만약 내가 취업을 위해 자기소개를 하는 포트폴리오를 만들때 유용한 수업이고
다양한 CSS를 사용해볼 수 있는 예제라서 시작할 때부터 들떠있는 상태였다.

전체적인 HTML 소스 코드는 이렇다.
나는 .wrapper .header .contents .footer 별로 설명을 해볼 것이다.

<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
        <title>PROFILE</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
   <!-- wrapper 시작 -->
	<div class="wrapper">
      <!-- header 시작 -->
      <div class="header">
        <img class="profile" src="./images/profile02.png" alt="">
        <h1>GLENN LEE</h1>
        <p>FRONTEND DESIGNER</p>
      </div>
      <!-- header 끝 -->
      
      <!-- contents 시작 -->
      <div class="contents">
        <div class="section information">
          <h2>Information</h2>
          <ul class="list">
            <li><a href="#">Shin Hyunwoo</a></li>
            <li><a href="#">gitcodehw@gmail.com</a></li>
            <li><a href="#">Busan, Korea</a></li>
          </ul>
        </div>
        <div class="section skills">
          <h2>Skills</h2>
          <ul class="list">
            <li><a href="#">Photoshop</a></li>
            <li><a href="#">Graphic Design</a></li>
            <li><a href="#">HTML + CSS</a></li>
          </ul>
        </div>
      </div>
      <!-- contents 끝 -->

      <!-- footer 시작 -->
      <div class="footer">
        <a class="icon github" href="#">Github</a>
        <a class="icon facebook" href="#">Facebook</a>
        <a class="icon email" href="#">Contact</a>
      </div>
      <!-- footer 끝 -->
    </div>
    </body>
  <!-- wrapper 끝 -->
</html>

reset CSS 🔄

reset CSS란 태그마다 기본값으로 가지는 값이 있다. 이것을 User agent stylesheet라고 한다.
이는 브라우저마다 설정 값이 다 다르기 때문에 한 가지 코드를 적용했을 때 결과가 다른 경우가 있다.
이러한 불편함을 없애기 위해 태그가 가지고 있는 브라우저별 기본값을 초기화 시켜주는 것이 "reset CSS를 설정한다." 라고 한다.

<body> 태그가 가지는 기본 값은 이렇다.

<body>는 display:block이 적용된 "블록 레벨 요소"이며, margin:8px이 기본적으로 가진다고 나와있다.
이를 초기화 시키기 위해선 <body>에 초기화를 위한 CSS를 적용시켜야 한다.

body{
  margin:0; 
  padding:0;
}

이렇게 적용을 시키면 margin:8px은 취소선이 그려지면서 초기화가 된다.
강사님께서는 물론 이미 개발자들이 만든 다양한 reset CSS가 있지만 직접 작성하고 이렇게 하나씩 초기화를 시켜나가는 과정은 CSS 공부에 아주 도움이 된다고 한다. 그래서 하나씩 다 작성해서 많은 태그를 초기화 시켜주었다.

강사님이 말씀하신 개발자들이 만든 reset CSS는 이 곳에서 볼 수 있다.

/* reset */

body,p, ul{
  margin:0; 
  padding:0;
}

body{
  background-image: url(./images/background.gif);
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

h1, h2{
  margin: 0;;
  font-size:inherit; 
  font-weight: initial;
}

li{
  list-style: none;
}

a{
  text-decoration: inherit;
  color:inherit;
}

`<body>`와 .wrapper 부분 설명 🔎

<body>에는 reset CSS를 제외하고 아래의 CSS를 적용하였다.

body{
  background-image: url(./images/background.gif);
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

<body>태그에 "배경이미지"와 관련된 Property가 많은 것이 보일 것이다.

background-image : 설정할 배경 이미지의 파일을 선택한다.
background-position : 배경 이미지의 위치를 설정한다.
background-attachment : 배경 이미지를 뷰포트 내에서 고정할지, 자신의 컨테이닝 블록과 함께 스크롤할지 지정한다.
background-size : 배경 이미지의 사이즈를 설정한다. 주로 꽉 채우기 위해 cover를 속성값으로 사용된다.

위의 이미지는 background-size:cover를 적용하지 않았을 때이다. 자세히 배경을 보면 바둑판식으로 배경 이미지가 반복되어 있는 것을 볼 수 있다. 하지만 적용을 시키면 정상적인 깔끔한 배경이 나오게 된다.

background-size:cover는 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정하고 만약 이미지의 가로세로비가 다르다면 세로 또는 가로 방향으로 빈 공간이 없이 설정하는 것이다.
쉽게 생각해서 가로 세로에 맞게 이미지를 손상되지 않는 선에서 꽉 채워준다고 생각하면 된다.

물론 배경이 바둑판식으로 반복되어 적용이 되는 것은 background-repeat:no-repeat로 해결할 수 있으나 background-size:cover를 통해 문제를 바로 해결할 수 있다.

background-attachment:fixed는 배경을 뷰포트에 대해 고정한다. 중간의 프로필 카드는 움직이지만 배경 이미지를 고정이 되어 스크롤이 행해져도 뷰포트에 그대로 고정되어 있다.
이 속성은 주로 공간감을 주는 '패럴렉스 디자인'에 주로 사용된다.

다시 소스코드를 보면 가장 바깥쪽에 전체 태그를 감싼 .wrapper 태그가 있을 것이다.
여기에 적용된 CSS를 살펴보자

.wrapper{
  background-color: #ddd;
  width:800px;
  margin:100px auto;
}

우선 .wrapper의 전체 배경색을 #ddd로 적용시켰고 width:800px을 적용시켰다.
width를 설정한 이유는 전체 태그를 감싸는 .wrapper를 margin:100px auto를 통해 페이지에 "중앙 정렬"을 하려는 목적이 있다.

그리고 굳이 .wrapper를 사용하여 전체 태그를 감싸는 이유는 추후에 디자인이나 기능이 업데이트 되었을 때 추가할 코드를 넣기만 해도 페이지에 중앙 정렬이 되어있기 때문에 미래의 편의성과 범용성을 위해 했다고 하셨다.(메모메모)

강사님께서는 단순한 디자인이지만 "미래를 생각하는 CSS"를 고민하는 것이 중요하다고 하셨다.

.header 위의 이미지가 나타내는 부분을 가리킨다.

배경 이미지
프로필 이미지
이름
직업

이렇게 4가지로 구성이 되어 있다.

div{
  margin: 0 auto;
}

.header{
  background-image: url(./images/cover04.png);
  background-size: cover;
  height: auto;
  text-align: center;
  color:#fff;
  padding:50px 0;
}

.header img.profile{
  border:10px solid #fff;
  border-radius: 200px / 50px;
}

.header h1 {
  font-size: 100px;
}

.header p{
  border-top:4px solid;
  display: inline-block;
  padding: 10px 20px;
  margin:20px auto;
}

.header에 background-image background-size를 설정하여 배경 이미지를 전체 넓이만큼 적용하였다.

.header에서 중요한 것은 text-align: center 부분이다. 왜 이 속성이 중요한지 설명하겠다.

<!-- header 시작 -->
      <div class="header">
        <img class="profile" src="./images/profile02.png" alt="">
        <h1>GLENN LEE</h1>
        <p>FRONTEND DESIGNER</p>
      </div>
<!-- header 끝 -->

보시다시피 .header 안에는 <img>, <h1>, <p> 태그가 있다.
근데 이 태그들은 text-align: center가 없으면 어떻게 될까?

위처럼 왼쪽 정렬이 된다.

우리나라는 글을 왼쪽에서 오른쪽을 읽는다. 이는 여기서도 적용이 되는데 기본적으로 나라마다 다르지만 우리나라는 정렬을 설정하지 않으면 기본적으로 "왼쪽 정렬"을 적용한다.
그래서 .header의 안의 태그들이 왼쪽으로 정렬이 된 것이다. 이를 디자인적으로 만들기 위해 text-align: center을 적용하였다.

강사님께서 코딩을 할때 문화적인 차원에서 접근하면 이유가 나오는 경우가 있다는 말하셨는데 코딩을 하면서 그런 생각을 하신다는 것이 또 한번 존경심을 가지게 되었다.

그리고 다음 봐야하는 포인트 <p>의 "위쪽 선"이다.

.header p{
  border-top:4px solid;
  display: inline-block;
  padding: 10px 20px;
  margin:20px auto;
}

<p>는 기본적으로 한 줄을 차지하는 "블록 레벨 요소"이다. 그러면 위에 선은 한 줄을 차지하는 것이 정상인데 왜 조금만 차지하는 것일까?

이는 display: inline-block가 적용이 되었기 때문이다. <p>는 기본적으로 "블록 레벨 요소"이지만 display 속성을 사용하여 블록 레벨 요소와 인라인 요소의 특징을 둘 다 가지는 "인라인 블록 레벨 요소"가 된다.

인라인 블록 레벨 요소는 인라인의 특징인 "콘텐츠만큼의 넓이만을 차지"하며 블록 레벨 요소에 사용하는 속성인 width/height와 padding/margin의 적용이 가능하다.

위를 정리해보면 <p>는 인라인 블록 요소가 되어 콘텐츠 만큼의 너비를 차지하게 되어 위의 선 또한 그에 맞춰지게 되었으며 padding를 적용시켜서 콘텐츠 너비를 넓혀 더 길어지게 했고 텍스트와 선 간의 거리을 주었다.

.contents 부분 설명 🔎

<!-- contents 시작 -->
      <div class="contents">
        <div class="section information">
          <h2>Information</h2>
          <ul class="list">
            <li><a href="#">Shin Hyunwoo</a></li>
            <li><a href="#">gitcodehw@gmail.com</a></li>
            <li><a href="#">Busan, Korea</a></li>
          </ul>
        </div>
        <div class="section skills">
          <h2>Skills</h2>
          <ul class="list">
            <li><a href="#">Photoshop</a></li>
            <li><a href="#">Graphic Design</a></li>
            <li><a href="#">HTML + CSS</a></li>
          </ul>
        </div>
      </div>
<!-- contents 끝 -->

.contents{
  padding:30px;
}

.section{
  background-image: url(./images/icon-information.png);
  background-repeat: no-repeat;
  background-position: right 30px center;
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
}

.section:last-child{
  margin-bottom: 0;
}

.section.skills{
  background-image: url(./images/icon-skills.png);
}

.section h2{
  color:salmon;
  font-size:20px;
  margin-bottom: 20px;
}

.list li{
  border-left: 5px solid #ddd;
  padding : 2px 10px;
}

.list li:hover{
  border-color:pink;
  color:pink;
}

개인적으로 조금 고민을 하게 되는 부분이였다.

나였다면 <section>의 이미지를 배경이 아닌 <img>로 넣었을 것이다.
하지만 강사님께서 배경 이미지로 적용하는 이유는 사용하는 이미지 자체에는 아무런 의미가 없기 때문이라고 하셨다.
<img>는 컨텐츠일 때, 즉 내용을 담고 있을 때 사용하는 것이라고 하셨다.

그리고 background-position: right 30px center이 조금 헷갈렸다.
보통 속성의 값을 center만 쓰다보니 다르게 쓰는 방법을 잊어버린 것 같아 다시 정리한다.

/* 값이 1개 */
background-position: x축 이동 값

/* 값이 2개 */
background-position: x축 이동 값 | y축 이동 값

/* 값이 3개 */
background-position: 키워드1 | 키워드1을 기준으로 이동할 값 | 키워드2
					 * 키워드1이 x나 y축이면 키워드2는 자동적으로 키워드1과 반대되는 축으로 정의됨

ex) background-position: right | 45px | bottom
	: 오른쪽에서 45px를 이동하고 아래쪽에서 0px 배치

/* 값이 4개 */
background-position: 키워드1 | 키워드1을 기준으로 이동할 값 | 키워드2 | 키워드2을 기준으로 이동할 값
					 * 키워드1이 x나 y축이면 키워드2는 자동적으로 키워드1과 반대되는 축으로 정의됨

ex) background-position: right | 45px | bottom | 20px
	: 오른쪽에서 45px를 이동하고 아래쪽에서 20px 배치

값으로 사용되는 키워드이란 top,bottom,left,right,center가 있다.

그래서 background-position: right 30px center는 "right를 기준으로 30px를 이동하고 y축에서 가운데로 배치"를 뜻한다.

오랜만에 쓰면 다시 알아가면 되니 조급해하지 말자! 👍

<!-- footer 시작 -->
      <div class="footer">
        <a class="icon github" href="#">Github</a>
        <a class="icon facebook" href="#">Facebook</a>
        <a class="icon email" href="#">Contact</a>
      </div>
<!-- footer 끝 -->

.footer{
  background-color: #f4f4f4;
  text-align: center;
  padding:20px 0;
}

.icon{
  display: inline-block;
  width:48px;
  height:48px;
  border-radius: 30px;
  border:2px solid #ddd;
  color:white;
  text-indent: -9999px;
  background-image: url(./images/icons.png);
  background-size: 144px 96px;
}

.icon.github{
  background-color: black;
  background-position: left top;
}

.icon.facebook{
  background-color: dodgerblue;
  background-position: center top;
}

.icon.email{
  background-color: orangered;
  background-position: right top;
}

.icon:hover{
  background-position-y: bottom;
}

드디어 대망의 .footer 파트!
.footer 부분 또한 고민할 것이 좀 있었다.

인라인 요소가 나란히 있을 때 사이의 간격은 margin인가?
IR기법이란?
이미지 스프라이트 기법이란?

1. 인라인 요소가 나란히 있을 때 요소 간의 간격은 margin인가?

나의 답은 당당하게 margin이다! 라고 말했다.
하지만 정답은 "margin이 아니다."이다.

<!-- footer 시작 -->
      <div class="footer">
        <a class="icon github" href="#">Github</a><!--이 곳이 간격의 원인-->
        <a class="icon facebook" href="#">Facebook</a><!--이 곳이 간격의 원인-->
        <a class="icon email" href="#">Contact</a><!--이 곳이 간격의 원인-->
      </div>
<!-- footer 끝 -->

인라인 요소 간에 발생하는 좁은 간격은 태그를 작성할 때 한 줄을 띄웠을 때 발생하는 공백일 뿐이다.
HTML 파일에서 아무리 엔터를 여러번 쳐도 줄바꿈은 되지 않고 공백이 병합이 된다.
그래서 엔터 한번은 인라인 요소 간의 간격이 된다.

em은 "부모"의 설정된 font-size의 배수

참고로 이 간격은 em 단위로 계산되기 때문에 폰트 크기가 커지면 그에 비례하여 증가한다.

<!-- footer 시작 -->
      <div class="footer">
        <a class="icon github" href="#">Github</a><a class="icon facebook" href="#">Facebook</a><a class="icon email" href="#">Contact</a>
      </div>
<!-- footer 끝 -->

희한한 건 위처럼 줄바꿈이 없이 작성을 하게 되면 간격 또한 생기지 않게 된다.
참으로 신기한 CSS의 세계...😵‍💫

2. IR기법이란?

IR기법이란 CSS 속성으로 보여준다면 text-indent: -9999px이다.

Image Replacement의 약어로 이미지의 대체텍스트를 제공하기 위한 CSS 기법이다.

이 실습에서는 .icon의 기능을 설명하는 이미지를 배경 이미지로 넣고 있다.

하지만 background와 관련된 속성 중에 이미지를 설명하는 대체 텍스트를 설정하는 속성은 존재하지 않는다.
그래서 "웹접근성"을 위해 이미지를 설명하는 대체 텍스트가 없어 스크린 리더기를 사용하는 장애인에게는 불편함을 초래한다.

그래서 <a>에 이미지를 설명하는 텍스트를 콘텐츠로 입력하고 "들여쓰기"를 해주는 text-indent 속성을 이용하여 값을 -9999px처럼 큰 값으로 설정하여 텍스트를 멀리 보내준다.

이렇게 되면 텍스트는 뷰포트에서 안보이는 곳에서 여전히 존재하기 떄문에 스크린 리더기가 인식하여 읽어준다.

3. CSS 스프라이트 기법이란?

웹페이지를 클론할 때 이미지를 구하다보면 위처럼 여러가지 이미지가 한 이미지에 붙어있는 것을 볼 수 있다.
이는 페이지의 로딩 속도를 줄여주는 등 웹 성능 최적화를 위해 사용하는 CSS 기법이다.

아이콘이나 버튼 같이 자주 쓰이는 이미지들을 쓸 때마다 불러오는 것이 아니라 위의 파일처럼 여러 이미지가 병합되어 있는 하나의 이미지를 배경 이미지로 하여 좌표값을 설정해서 사용한다.

좌표값은 background-position: x축 이동 값 | y축 이동 값 속성을 사용한다.

.icon{
  display: inline-block;
  width:48px;
  height:48px;
  border-radius: 30px;
  border:2px solid #ddd;
  color:white;
  text-indent: -9999px;
  background-image: url(./images/icons.png);
  background-size: 144px 96px;
}

실습 예제에서는 여러 이미지가 병합된 배경 이미지를 설정하고 width와 height의 값을 정해준 후 아래의 background-size의 좌표값을 이용하여 설정하고 있다.
이런 식으로 설정해서 결과를 보면 아래처럼 48*48px 크기로 잘 들어간 것을 볼 수 있다.

그 밖의 중요한 팁들!

인라인 요소와 인라인 블럭 레벨 요소는 베이스라인을 기준으로 세로 정렬을 한다.
타입 셀렉터(태그)는 되도록이면 reset할때만 사용하는 것이 좋다. 전체 태그를 다 바꾸기 때문에 코드에 혼란이 올 수 있다.
속성값 initial을 사용하는 것을 당분간 자제하자. 왜냐하면 브라우저 생태계를 방해하는 'IE'가 지원하지 않아 크로스 브라우징에 좋지 않다. ~~익스 이자식..~~
상속이 지원되는 속성은 초기화 해줄 때 inherit를 사용하고 키워드를 사용하고 상속이 지원이 안된다면 initial 사용하면 된다. 하지만 initial의 사용은 자제한다.
속성값 unset은 inherit이 되는 것은 inherit으로 해주고 안되면 initia로 해줌
상속이 되는 위치는 개발자 도구 하단에서 볼 수 있다.

각각의 Property에 따라 initial의 값은 다르다. 왜냐하면 initial의 값은 적용하는 Property의 "기본값"이기 때문이다. 각각의 Property의 기본값은 MDN에서 검색하여 확인하도록 한다.
width:100%와 width:auto는 둘 다 부모의 사용 가능한 영역을 채우는 것은 똑같다. 하지만 width:100% 상황에서 margin을 주면 margin만큼 영역이 '추가'가 된다. 즉, 100%가 초과된다.
하지만 auto는 margin을 "포함"해서 100%로 계산한다.
속성은 text-align:center 인라인 요소(콘텐츠 텍스트 포함)가 부모의 기준으로 중앙 정렬하는 것이고 태그 자체가 이동하는 것이 아니다. 반면에 margin:0 auto는 블록 레벨 요소 자체를 중앙 정렬하는 것이다.
위아래로 있는 블록 레벨간의 상하단 margin은 겹치게 설계해놓았다. 이를 마진 병합 현상이라고 한다. 이 현상은 순수한 블럭 레벨의 요소에게만 적용이 된다. 자세한 내용은 링크를 통해 확인하길 바란다.
** 추가적인 해결법 : display:flow-root가 있지만 브라우저 간 호환성이 떨어져 확인하고 사용하도록 한다.
class명은 반드시 보고 한번에 어떤 태그인지 알 수 있도록 "직관적"으로 작성할 것을 당부한다.
Selector Specificity은 스타일 적용의 우선순위와 관련된 법칙이다. 선택자(Selector)의 경로가 구체적일수록 높은 우선순위를 가진다. 아래 이미지를 참고하면 도움이 될 것이다.

태그에 적용하는 attribute인 id는 유일하게 하나만 사용할 수 있기 때문에 스타일 속성을 적용하는데 적합하지 않다. 스타일은 되도록 class를 사용하도록 하자!
코드를 한번에 써놓고 고치는건 마지막에 모두 수정하기 힘들기 때문에 소규모로 마크업하고 스타일 적용/확인 후 소규모로 수정 하는 것으로 하는 것이 좋다.
레이아웃을 파악할 때 큰 박스에서 작은 박스 순으로 구분하여 마크업하라!

강사님께서 추천하는 마크업 순서 ⭐️

컨텐츠부터 막 서둘러 넣지 않고 전체적인 덩어리를 먼저 나누기.

구분을 위해 각각 시각적으로 힌트를 줘야한다. 배경 색을 주고 영역이 한눈에 구분이 되게 만들기

레이아웃 관련 스타일만 적용한다. 안에 내용물을 막 넣기 전에 margin/ padding 같은 속성을 사용하여 공간 구성하기

type-selector를 이용한 reset CSS 만들기 (margin:0,padding:0 등)
** inherit는 사용하되 initial은 IE의 호환성을 위해 당분간 사용을 자제하기

class selector를 사용하여 세세한 내부 스타일 적용하기

"빔캠프" 이종찬 강사님의 특강 정리를 마치며.. 😭

솔직히 "멋쟁이사자처럼 프론트엔드 스쿨" 과정을 하기 전에 HTML과 CSS의 중요성을 잊고 Javascript만 잘하면 되겠지라는 생각만 가지고 공부를 하고 있었는데 이번 특강을 통해 한번 더 HTML/CSS의 중요성을 알았다.
또한 특강을 통해 다시 HTML/CSS의 기초에 흥미를 느끼게 되어 총 8시간의 강의가 짧게 느껴질 정도로 재미있었고 인상 깊었다.

그리고 이종찬 강사님의 CSS를 특별한 관점으로 보는 것에 대해서 정말 존경스러웠으며 계속해서 발전하려는 모습을 보고 스스로 반성하는 계기가 되었던 것 같다.

이번 특강을 계기로 계속 발전하는 개발자로 성장하도록 더욱 노력해야겠다.
인상깊은 이론의 대한 특강뿐만 아니라 개발자의 태도를 한번 더 가르쳐주신 이종찬 강사님께 다시 한번 감사의 인사를 전하고 싶다.