CSS 배치 속성과 반응형 웹

2022.08.10

 

• <비전공자를 위한 첫 코딩 챌린지> - DAY 7

:  08 CSS 배치 속성과 반응형 웹

 

 

---

 

 

Review

 

• <비전공자를 위한 첫 코딩 챌린지> - DAY 7

 

: 오늘은 내가 제일 배우고 싶었던 반응형 웹을 배웠다. 아직 배울 것이 산더미처럼 남아 있겠지만

나중에 어플리케이션을 구현하고 싶은 소망도 있어서 반응형이라는 것이 궁금했다.

 

 

 

<배치 속성>

 

: CSS 레이아웃과 관련된 것이다.

자동 줄바꿈이 되는 헤더

 

실행 결과

 

span 태그는 줄바꿈을 하지 않은 채 글꼴, 색상, 여백 등을 조절하는 기능을 한다. 

그런데 여기서 h1 태그 다음 span 태그를 적었는데 줄바꿈이 되었다.

왜 h1 태그는 자동으로 줄바꿈이 될까? enter가 줄바꿈 요인은 아닌데 그럼 왜 그럴까?

그 이유는 h1 태그가 블록 레벨 요소이기 때문이다.

*블록 레벨 요소는 밑에 예제와 함께 설명

 

h1 태그와 span 태그 모두 테두리를 주어서 차이를 확인해보자.

 

border라는 속성이 있는데, 이를 사용하면 요소에 테두리 굵기, 스타일, 색상 등을 순서 상관없이 지정할 수 있다.

이전 코드는 그대로 두고 style.css 파일을 따로 적용했다.

h1과 span 태그 요소 모두에 빨간색 테두리를 씌워보는 예제를 시작한다.

 

 

모든 요소마다 테두리 적용하기 (style.css)

 

 

실행 결과

 

3px는 테두리 굵기이고, solid는 선 스타일, 그리고 red 는 선 색상을 지정한 것이다.

h1 태그 테두리는 요소 가로 화면 전체를 둘러싸고 있다.

반면, span 태그 테두리는 요소 크기에 맞춰졌다.

h1 태그처럼 요소의 가로 줄 전체를 차지하는 요소를 블록 레벨 요소라 부르고,

span 태그 같이 요소 크기만큼의 너비를 차지하는 요소를 인라인 레벨 요소라 부른다.

 

 

 

<블록 레벨 요소와 인라인 레벨 요소>

 

: 모든 HTML 요소에는 display 라는 속성이 있고, 그 기본값이 블록 또는 인라인으로 설정되어 있다.

위에서 배운 것 처럼 블랙 레벨 요소는 요소가 있는 가로 줄 전체를 차지하고, 

인라인 레벨 요소는 요소가 있는 공간만을 차지한다.

 

예를 들어 h1 태그는 블록 레벨 요소이고, span 태그는 인라인 레벨 요소이다.

그렇다면 태그마다 이 두 특성은 고정인가? 그것은 아니다.

display 라는 CSS 속성으로 바꿔줄 수 있다.

display 값이 block이면 요소 가로 줄 전체를 차지하기 때문에 요소마다 줄바꿈이 발생한다.

반면 display 값이 inline이면 요소 크기만큼만 공간을 차지하기 때문에 요소 자체의 크기에 따라 

줄바꿈이 발생한다.

 

 

 

<CSS에서 속성 변경하기>

: 인라인 레벨 요소를 블록 레벨 요소로, 혹은 블록 레벨 요소를 인라인 레벨 요소로 바꿀 수 있다.

 

-인라인 레벨 요소로 바꾸기

: 앞에서 다룬 예제에 사용한 CSS 속성을 모두 인라인으로 만들어보자.

그러면 h 태그의 줄바꿈이 없어질 것이다. 

 

인라인 레벨 요소로 바꾸기 예제

 

실행 결과

 

코드를 살펴보면 앞선 style.css 파일을 그대로 두고, 그 다음 줄에 display 속성으로 inline을 적용한다.

오 ! h 태그도 딱 요소 크기만큼만 가로 공간을 차지하게 바뀌었다. 신기하다.

생각보다 간단하다.

 

 

-블록 레벨 요소로 바꾸기

: 여기서 주목할 점은 줄바꿈이 일어나지 않았던 span 태그까지 모두 줄바꿈이 일어난다는 것이다.

 

블록 레벨 요소 적용하기 예제

실행 결과

 

여기서는 앞 예제 코드에서 display 값을 inline에서 block으로 변경해주기만 하면 된다. 

아주 간단하다.

 

나는 그냥 쉽게 블록 레벨 요소는 무조건 줄바꿈, 인라인 레벨 요소는 크기에 맞춰 줄바꿈 이렇게 외웠다.

 

 

 

<박스 모델 : 마진, 테두리, 패딩>

 

: 블록과 인라인이라는 개념은 왜 존재하는가? 그 이유는 바로 보기 좋게 배치하기 위함이다 !

요소를 원하는 곳에 배치하려면 태그마다 가지고 있는 특성을 알아야 한다.

이때 블록과 인라인 요소 외에도 레이아웃을 정하는 HTML 요소가 있다. 

바로 박스 모델이다.

 

CSS 박스 모델은 기본적으로 모든 HTML을 감싸는 상자이다.

요소, 패딩(padding), 테두리(border), 마진(margin)으로 구성되어 있다.

 

마진, 테두리, 패딩, 요소 관계

 

-요소 : 텍스트, 사진 등 보여줄 대상이다.

-패딩(padding) : 요소 주변 영역을 감싼다. 해당 부분은 투명색이다.

-테두리(border) : 요소와 패딩을 감싸는 테두리이다.

-마진(margin) : 테두리 밖의 영역을 감싼다. 해당 부분은 투명색이다.

 

텍스트나 이미지처럼 눈에 보이는 요소와 달리 마진과 패딩은 명확하게 구분하기 어렵다.

그냥 요소, 패딩, 테두리를 표시하고 남은 영역이 마진이라고 생각하면 된다.

그리고 추울 때 패딩을 입는 것처럼 요소 위에 입는 것이 패딩이라고 생각하자.

 

 

 

<border로 밑줄 치기>

 

border 태그를 이용한 밑줄 치기 예제

 

실행 결과

 

위의 예제에서 style.css 코드만 변경했다.

Emotion 텍스트와 그 아래 텍스트 사이에 구분선을 만들고, SAD, HAPPY, LOVE 사이 간격을 더 넓히는 

예제를 실행했다.

 

테두리를 지정하는 속성인 border 속성을 사용하자.

Emotion 아래에만 있으면 되니까 border-bottom 이라고 입력하면 된다.

 

선택자로 h1을 지정한 뒤 border-bottom 속성에 1px 굵기(1px)의 검정색(black) 실선(solid)을 지정한다.

간격을 조정하는 것은 아래 예제를 통해 설명하겠다.

 

 

 

<검사 기능으로 속성 확인하기>

 

 

index.html을 크롬으로 실행해 마우스 오른쪽을 클릭한 후 '검사'를 누른다.

그러면 이 특이한 정보가 보인다.

 

1. Emotion 글자 위에서 우클릭 해 검사를 선택하면 우측 하단 박스의 마진 영역에 마우스 커서를 올린다.

그러면 왼쪽에서 마진 영역이 나타난다.

2. 우측 하단의 패딩 영역에 마우스 커서를 올리면 왼쪽에서 패딩 영역이 나타나야 하는데, 

아무것도 보이지 않는다. 왜냐하면 h1에 패딩값이 없기 때문이다.

따라서 h1 태그에 패딩을 추가해야 우리가 원하는 간격을 조정할 수 있다.

3. 좌측 화면에서 SAD 텍스트 위에서 우클릭하여 검사를 선택한다. 우하단에서 'auto x auto' 에 

마우스 커서를 올려서 span 태그들의 요소 영역과 스타일 영역을 확인해본다.

span 태그에는 요소 영역 외에 패딩 또는 마진이 전혀 없다. 마진과 패딩 영역에 마우스를 올려 놓아도

표시가 안 나타난다.

 

4. h1과 span에 패딩을 설정해준다.

 

여백을 준 모습 (간격 조정)

 

 

h1 태그에 패딩값 10px을 적용하고, span 태그에 패딩값 5px을 적용하니 간격이 확 넓어졌다.

오 이건 내가 자주 사용할 것 같다. ppt를 만들 때도 나는 간격을 중요시하기 때문에 자간 간격과 줄 사이 간격을

항상 조정하기 때문이다... 깔끔한 걸 추구해서 항상 뭔가 만들 때 남들보다 시간도 오래 걸리고 고생한다.

 

 

변경 전과 변경 후

 

기존에는 Emotion 텍스트와 밑선의 간격도 좁았지만 변경 후에는 넓어졌고,

SAD, HAPPY, LOVE 텍스트 사이의 간격도 넓어졌다.

 

 

<실습 : 반응형 웹 페이지 만들기>

 

: 내가 가장 배우고 싶은 것이 드디어 나왔다. 블로그를 작성할 때도 PC로 나름 예쁘게 꾸며놓은 것이 

스마트폰에서는 줄이 맞지 않는다든지 여튼 다르게 보여서 속상했다.

이제 이유를 알았다.

 

반응형 디자인이란 화면 해상도에 따라 HTML과 CSS를 자동으로 맞춰서 보여주는 기능을 말한다.

예를 들어 골든래빗 홈페이지(goldenrabbit.co.kr)는 PC에서 봤을 때랑 스마트폰에서 봤을 떄 다르게 보인다.

반응형이 적용된 홈페이지라서 그렇다.

 

'미디어 쿼리' 라는 것을 사용해서 반응형 디자인을 만들 수 있다. 

'미디어 쿼리(media query)'는 사이트에 접속하는 미디어 타입과 특징에 따라 다른 CSS 스타일을 적용하도록

도와주는 규격이다.

예를 들어 작은 해상도에 맞게 텍스트 크기를 조정하거나, 페이지를 세로 모드로 볼 때 단락 사이의 패딩을

늘리거나, 버튼 크기를 늘릴 수 있다.

이렇게 웹 사이트에 접속하는 기기 해상도에 따라 HTML과 CSS가 바뀌는 웹을 반응형 웹이라고 부른다.

 

미디어 쿼리는 @media 라고 쓰고, 다음과 같은 상황에 사용할 수 있다.

1. CSS에서 @media와 @import 를 사용해 특정 조건에 따라 스타일을 적용할 때

2. HTML 요소에 media 특성을 사용해 특정 매체만 가리킬 때

 

아직 무슨 소린지 모르겠다.

 

예를 들어 어떤 값에 따라 색깔을 다르게 적용할 때 다음과 같이 쓸 수 있다.

@media (color) {...}

 

@improt는 다른 스타일시트에서 스타일 규칙을 가져올 때 사용한다.

예를 들어 hello.css를 불러온다고 가정해보면, 아래 2가지 방법으로 작성할 수 있다.

1. @import url("hello.css");

2. @import 'hello.css';

 

이때 주의할 점은 @import는 문서 최상단에 있어야 한다는 점이다.

코드는 위에서 아래로 해석되고 실행되므로 사용할 파일을 최상단에서 먼저 불러와야 불러온 파일 내용을

이용하는 코드가 동작할 수 있다.

 

<배경색 지정하기 : background-color 태그>

: 화면 너비에 따라 배경색이 바뀌는 반응형 웹 페이지를 만들어보자.

오늘 사용한 첫 예제에 배경색을 추가해봤다.

 

배경색 추가 예제

실행 결과

오 예쁘다 - ! 이건 내가 프로필 링크 만들기할 때 사용했던 코드라서 익숙하다.

 

 

<배경색이 바뀌는 웹 페이지를 만들기>

 

: 본격적으로 첫 반응형 웹 페이지를 만들어보자.

 

CSS에서 미디어 쿼리를 적용하는 방법은 다음과 같다.

<style>

   @media 미디어타입 (적용 조건)  {

           규칙

    }

</style>

 

미디어타입으로는 전부(all), 프린트(print), 화면(screen), 음성(speech)를 지정할 수 있다.

아무것도 쓰지 않으면 기본값인 all이 적용된다.

 

가로 너비에 따라 배경색이 바뀌는 것이 목표인데 다음 예제에서 미디어 쿼리를 이용해 화면 크기에 따라

색이 바뀌는 코드를 작성해보자.

 

미디어 쿼리 적용

너비가 1280px 이하인 화면에서는 배경색이 핑크색이고, 

너비가 600px 이하인 화면에서는 배경색이 올리브색이다.

 

 

너비가 1280px보다 클 때

 

너비가 1280px 이하일 때

 

너비가 600px 이하일 때

 

@media를 작성한 후 max-width 속성을 사용했다.

max는 최대라는 뜻을 갖고 있고, width는 너비라는 뜻을 가져서 조합하면 최대 너비라는 의미다.

1280px을 최대 너비로 지정하니, 1280px까지는 핑크색 배경으로 보인다.

만일 1280px보다 크면 아무것도 지정하지 않았으니 하얀 배경으로 나온다.

그리고 화면이 작아질 때는 600px 이하에서 올리브색으로 변경하도록 지정했다.

 

이렇게 미디어 쿼리를 사용하면 다양한 기기 해상도에 맞게 HTML과 CSS를 바꿀 수 있다.

미디어 쿼리는 아주아주 유용하게 사용될 것 같아 잘 기억해둬야 할 것 같다.

나중에 나만의 앱을 만들 때 활용해봐야지 !

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

*이미지 출처

instagram : @postershop.kr