[HTML/CSS] 3일차

김민정·2024년 1월 9일

CSS html 개발 기술블로그 백엔드 부트캠프 오즈스쿨 웹개발 초격차캠프 코딩 코린이 프론트엔드

HTML/CSS

목록 보기

5/9

1. 요소의 유형 `<display>`

💫이전 내용 복습

블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다. ex) div, p, h1 등
인라인 요소 : 자기에게 필요한 만큼의 공간만 차지한다. ex) span, a 등

1. `<display>`

<display> 속성은 요소를 블록 요소와 인라인 요소 중 어느 쪽으로 처리할지 정의하나. 즉, 요소의 유형을 변경할 수 있다.

1. /* 블록 레벨 요소인 div 요소를 인라인으로 처리하고 싶다면*/
div{ display: inline; }

2. /* 인라인 요소인 a 요소를 블록 레벨로 처리하고 싶다면*/
a{ display: block; }

2. `<display>` 속성에 지정할 수 있는 대표적인 설정들

none
: 요소를 화면에 표시하지 않는다.
block
: 요소를 블록 레벨 요소로 만듭니다.
inline
: 요소를 인라인 요소로 만듭니다.
inline-block
: 요소를 인라인 요소로 표시하되, 블록 레벨의 특성을 추가합니다.
ex) 인라인 : width, height 기능이 적용이 안된다.
인라인-블록 : width, height 기능 적용 된다.

[실습]

HTML, CSS 코드

CSS 웹페이지 출력

p 태그 : 기본적으로 margin이 있다.
→ 이걸 display 태그를 사용하여 inline 설정을 하면 인라인 요소로 변경할 수 있다. (margin 없음.)
인라인 요소가 된 p 태그는 width, height 기능이 적용되지 않는다.
→ 이걸 inline-block 설정을 하면 인라인 요소지만 width, height 기능을 적용할 수 있다.

2. 문서의 흐름 `<float>`

1. 문서의 흐름 이해하기

웹 요소들이 화면에 표시되는 순서는 기본적으로 HTML 문서 내에서 태그가 쓰여진 순서를 따른다.

종이 위에 글을 쓸 때 왼쪽에서부터 오른쪽 방향으로 한 글자 한 글자 써 나가고 또 글자 수가 채워지면 위에서부터 아래로 줄을 바꿔가며 써 내려가는 자연스러운 흐름에 따라 글을 쓰는 것처럼, 웹 브라우저가 화면 위에 요소를 표시할 때에도 마찬가지로 이를 처리하는 기본적인 흐름이 있다.

ex) 인라인 요소 진행 방향
: 위 왼쪽 → 오른쪽
↓
아래

2. `<float>`

CSS의 <float> 속성은 요소를 문서의 흐름에서 제외시킨 채 부모 요소 또는 루트 요소를 기준으로 위치를 변경한다.

선택된 요소가 문서의 흐름에서 제외되어 상위 요소의 왼쪽 또는 오른쪽 면에 붙는 형태로 배치되도록 하는 특징을 가지고 있다.

사용 가능한 속성값
- left: 왼쪽을 뜻한다.
- right : 오른쪽을 뜻한다.
- none : float을 적용하지 않음을 뜻한다. (기본값)

3. `<float>` 속성 역효과 방지

<float> 속성을 적용한 요소를 '부동 요소'라 한다.
부동 요소는 위치를 이동하면서 다른 요소의 공간까지 영향을 주는데, 이는 잘 활용하면 유용하나 <float> 속성을 적용하지 않은 요소의 공간에 영향을 주어 때론 역효과를 가져온다.
(한글 파일 작성시 이미지의 본문과의 배치 때문에 글 위치에 영향을 주는 것을 생각하면 편하다.)

이러한 상황에 대응하기 위해 사용하는 속성으로 <clear> 가 있다.
<clear> 속성은 <float> 속성에 대응하기 위한 속성으로 3가지의 속성값이 있다.

right : 오른쪽의 <float> 무시
left : 왼쪽의 <float> 무시
both : 양쪽의 <float> 무시

[실습]

HTML, CSS 코드

CSS 웹페이지 출력

<float> 속성을 이미지 각각에 지정하기 위해 id를 각각 지정했다.
<float> 속성을 적용했을 때 위치를 보기 위해 사진의 크기를 다르게 지정했다.

3. 위치 지정하기 `<position>`

1. `<position>` 속성

<position> 속성은 문서 상에 요소를 배치하는 방법을 정의한다.<position> 속성이 요소의 배치 방법을 결정하면, top, bottom, left, right가 최종 위치를 결정하는 방식이다.
→ 상하좌우 위치 지정은 필요에 따라 선택적으로 사용한다.
※ 위치 결정하는 방식은 해당 방향(위치)에서 얼만큼 떨어질지를 결정하는 것이다.

2. `<position>`의 유형

static (기본값)
: 요소를 일반적인 문서의 흐름에 맞게 배치함.
relative
: '문서의 흐름에 맞춰 배치된 자리(원래 자리)를 기준으로' 요소를 이동시킴
absolute
: 'position이 지정된 상위 요소를 기준으로' 요소를 이동시킴. 이때 요소는 문서의 흐름에서 제외됨.
(position이 지정된 상위 요소가 없으면 '화면을 기준으로' 요소를 이동시킨다.)
fixed
: '화면을 기준으로' 요소의 위치를 고정함.
ex) 웹 페이지에서 채팅봇 위치, 상단º하단으로 이동하는 버튼 위치.

[실습]

HTML, CSS 코드

CSS 웹페이지 출력

absolute 속성값 ⭐
- <position> 속성값만 적용하면 이 요소만 문서의 흐름으로 제외하기 때문에 이 외 요소들은 문서의 흐름대로 (위부터) 배치된다.

- 이 속성값은 <position> 속성을 가진 요소를 기준으로 위치를 이동하기 때문에 그 요소가 없다면 화면을 기준으로 요소를 이동시킨다. ★

4. 겹치거나 넘치는 요소 다루기 `<z-index, overflow>`

1. position과 z축

<z-index> 속성은 요소의 쌓임 순서 (stack order)를 정의할 수 있다.
정수 값을 지정하여 쌓임 맥락 (stacking context)에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성이다.

→ 위치 지정 요소 (positioned element)란, <position> 속성이 정의되어 있는 요소를 말한다.

동일한 위치에 요소들이 배치되면, 요소들은 z축에서 쌓이게 된다. 이때, <z-index> 를 사용한다.
<z-index>의 기본값은 auto이며, 정수 값으로 각 요소의 쌓임 순서를 결정한다. (꼭 1부터 시작하지 않아도 된다.)
작은 숫자일 수록 아래에 쌓이게 된다. (건물 층수와 같은 원리)
(auto는 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태이다.)

2. `<overflow>` 속성

요소는 텍스트 또는 다른 요소를 자신의 콘텐츠로 가질 수 있고, 요소 내부의 콘텐츠 양이 많아질수록, 요소는 콘텐츠에 맞게 크기를 조절한다.
그러나 요소의 크기가 정해져 있는 상태에서 내부 콘텐츠의 크기가 요소보다 커지는 상황이 발생하면, 콘텐츠가 요소의 영역 밖으로 벗어나 버리는 '넘침 현상' 이 발생하기도 한다.
이러한 문제를 해결하기 위해서 <overflow> 속성을 사용한다.

3. `<overflow>` 속성값

visible (기본값)
: 영역을 벗어난 콘텐츠를 그대로 보여줌.
hidden
: 영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 함.
scroll
: 영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 하고, 잘려진 콘텐츠 진행 방향으로 스크롤을 만듦.
(스크롤 모양은 사용하는 컴퓨터, 웹 브라우저에 따라 다르다.)
auto
: 웹 브라우저 설정 값을 따름.
(데스트톱 브라우저에서는 주로 scroll로 처리되어 있다.)

[실습]

HTML, CSS 코드

CSS 웹페이지 출력

5. 선택자 더 알아보기

1. 선택자 유형

앞서 언급한 선택자(전체 선택자 (*), 태그 선택자, 클래스 선택자 (.), 아이디 선택자 (#), 그룹 선택자) 외에도, CSS에는 요소가 가진 다양한 특성을 토대로 스타일을 적용할 수 있는 여러가지 방법이 다음과 같이 존재한다.

속성 선택자 ([속성명])
: 특정 속성을 명시하여 요소를 선택
(태그명[속성명] / [속성명] 모두 사용 가능.)
하위 요소 선택자 (공백)
: 상위 요소에 포함된 하위 요소를 선택
자식 요소 선택자 (>)
: 상위 요소의 바로 한 단계 하위 요소를 선택
인접 형제 선택자 (+)
: 형제 요소 중 첫 번째 형제 요소를 선택
형제 요소 선택자 (~)
: 형제 요소를 선택
(뒤이어 있는 요소들만 적용됨.)

2. 속성 선택자 기호

*= : 값의 포함 여부
^= : 값의 시작 여부
$= : 값의 끝 여부

[실습]

HTML, CSS 코드

CSS 웹페이지 출력

위 실습 중 <img> 태그 3개와 <p> 태그 5개는 서로 형제 요소이다.

6. 의사 클래스와 의사 요소

1. 의사 클래스

의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다.

선택자:의사클래스{ 속성명: 속성값; }
ex) h1:hover{ color: red; }
: h1 요소에 마우스 커서가 올라오면 (hover) 글자를 빨간색으로 하겠다.

2. 자주 쓰이는 의사 클래스들

hover
: 마우스 포인터가 요소에 올라가 있다.
active
: 사용자가 요소를 활성화했다. es) 마우스 좌측클릭
focus
: 요소가 포커스를 받고 있다. (커서 깜빡 깜빡)
disable
: 비활성 상태의 요소이다.
nth-child()
: 형제 사이에서의 순서에 따라 요소를 선택한다.
*소괄호 안에 n을 넣을 수 있는데 2n (짝수 번째), 2n-1 (홀수 번째)와 같이 사용할 수 있다.

3. 의사 요소

의사 요소 (pseudo-elements)는 선택자에 추가하는 키워드로, 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다.

선택자::의사요소{ 속성명: 속성값; }
ex) li::first-letter{ font-size: 20px; }
→ li 요소의 첫 번째 글자만 크기를 20px로 하겠다. (기본값은 16px)

4. 자주 쓰이는 의사 요소들

after
: 요소의 앞에 의사 요소를 생성 및 추가한다.
before
: 요소의 뒤에 의사 요소를 생성 및 추가한다.
first-line
: 블록 레벨 요소의 첫 번째 선에 스타일을 적용한다.
marker
: 목록 기호의 스타일을 적용한다.
placeholder
: 입력 요소의 자리표시자(플레이스홀더) 스타일을 적용한다.

[실습]

HTML, CSS 코드

CSS 웹페이지 출력

7. Mini project. 나만의 채팅방 만들기

※ HTML 문서와 CSS 문서 따로 작성하여 link 시켰다.

HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>나만의 채팅방 🗯️</title>
    <link href="day3_challenge3_chat.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <main class="chat-screen"> <!-- 친구 상태바 & 채팅 내용 부분 -->
            <section class="chat-screen__bar">
                <div class="user"> <!-- 친구 상태바 -->
                    <div class="user__column"> <!-- 친구 프로필 -->
                        <div class="user__pic">
                            <img src="images/고양이1.jpg" class="user__pict">                            
                        </div>
                    </div>
                    <div class="user__column"> <!-- 친구 이름 및 채팅방 인원수 -->
                        <p class="user__nick">고영희🐈</p>
                        <p class="user__count"> &nbsp; 2</p>
                    </div>
                </div>
            </section>
        </main>

        <form class="chat-form"> <!-- 채팅 입력창 부분 -->
            <section class="chat-form__field">
                <textarea class="chat-form__msg"></textarea>
                <input type="submit" value="전송" class="chat-form__button">
            </section>
        </form>
    </div>
</body>
</html>

CSS 코드

/* 전체적인 setting */
*{
    box-sizing: border-box;
}
html{
    height: 100%; /* 화면 기준 100% 비율로 차게 */
} 
body{
    height: 100%;
    margin: 0; /* body가 가지고 있는 기본 margin 삭제*/
}
.container{
    height: 100%;
    background-color: #2E8B57;
}

/* 스크린(main) 크기 조정 */
.chat-screen{
    height: calc(100% - 120px); /* 전체 화면에서 채팅창 크기 만큼만 제외하고 넣기 */
}

/* 친구 상태바 조정 */
.user{
    background-color: white;
    padding: 16px;
    height: 130px;
}
.user__column{
    float: left;
}
.user__pic{
    width: 100px;
    height: 100px;
    margin-right: 10px;
    border-radius: 50px;
    overflow: hidden;
}
.user__pict{
    width: 140px;
    position: relative;
    left: -20px;
}
.user__nick, .user__count{
    font-size: 25px;
    margin: 10px;
}
.user__count{
    font-size: 18px;
    color: gray;
}

/* 채팅 입력창 조정 */
.chat-form{
    height: 120px;
    background-color: white;
}
.chat-form__field{
    height: 120px;
}
.chat-form__msg{
    width: calc(100% - 120px); /* 전송 버튼을 제외한 나머지 채우기 */
    height: 118px;
    border: none;
    resize: none;
    font-size: 20px;
    padding: 10px;
    float: left;
    position: relative;
    top: 1px;
}
.chat-form__button{
    width: 120px;
    height: 120px;
    border-radius: 10px;
    background-color: #3a7955;
    font-size: 18px;
    padding: 10px;
    float: right;
}

/* 추가 의사 클래스 작성 */
.chat-form__button:active{
    background-color: #1f3f2d;
    color: white;
}
.chat-form__msg:focus{
    outline: none;
    background-color: whitesmoke;
}

웹 페이지 결과.

CSS 웹페이지 출력

[CSS 강의 2일차 후기]

강의를 따라하면서 하면 이해가 잘 되지만 혼자 하려고 하면 속성들과 각 기능들이 잘 생각이 나지 않았다 ㅠㅠ

매일 퀴즈 형식의 과제라던지 Search형 과제는 하겠는데 만들어서 하는 과제는 확실히 처음에 비해 흥미가 많이 떨어져서 귀찮음이 커졌다,,,ㅎㅎㅎ 막상 하면 또 이쁘게 만들고 싶어서 욕심이 커진달까,,,

앞으로 2번은 더 들어야하는데 강의 자체는 재밌지만 내가 잘 할 수 있을진 잘 모르겠다,,,
(백엔드 코스 듣길 잘한 것 같다 ㅎㅎ)

[참고 자료]

[입문자를 위한 CSS3 (저자)강윤호] https://wikidocs.net/book/9136
[google browse fonts]
https://fonts.google.com/?subset=korean¬o.script=Kore
[16진수 색상표]
http://www.hipenpal.com/tool/html-color-charts-rgb-color-table-in-korean.php
[오즈스쿨 스타트업 웹 개발 초격차캠프 백엔드 HTML&CSS 강의]

김민정

백엔드 코린이😁

이전 포스트

[HTML/CSS] 과제 2일차 (XML과 XHTML의 다른 점?)

다음 포스트

[HTML/CSS] 3일차

HTML/CSS

1. 요소의 유형 `<display>`

💫이전 내용 복습

1. `<display>`

2. `<display>` 속성에 지정할 수 있는 대표적인 설정들

[실습]

2. 문서의 흐름 `<float>`

1. 문서의 흐름 이해하기

2. `<float>`

3. `<float>` 속성 역효과 방지

[실습]

3. 위치 지정하기 `<position>`

1. `<position>` 속성

2. `<position>`의 유형

[실습]

4. 겹치거나 넘치는 요소 다루기 `<z-index, overflow>`

1. position과 z축

2. `<overflow>` 속성

3. `<overflow>` 속성값

[실습]

5. 선택자 더 알아보기

1. 선택자 유형

2. 속성 선택자 기호

[실습]

6. 의사 클래스와 의사 요소

1. 의사 클래스

2. 자주 쓰이는 의사 클래스들

3. 의사 요소

4. 자주 쓰이는 의사 요소들

[실습]

7. Mini project. 나만의 채팅방 만들기

[CSS 강의 2일차 후기]

[참고 자료]

[HTML/CSS] 과제 2일차 (XML과 XHTML의 다른 점?)

[HTML/CSS] 과제 3일차 (UX와 UI 차이)

0개의 댓글

[HTML/CSS] 3일차

HTML/CSS

1. 요소의 유형 <display>

💫이전 내용 복습

1. <display>

2. <display> 속성에 지정할 수 있는 대표적인 설정들

[실습]

2. 문서의 흐름 <float>

1. 문서의 흐름 이해하기

2. <float>

3. <float> 속성 역효과 방지

[실습]

3. 위치 지정하기 <position>

1. <position> 속성

2. <position>의 유형

[실습]

4. 겹치거나 넘치는 요소 다루기 <z-index, overflow>

1. position과 z축

2. <overflow> 속성

3. <overflow> 속성값

[실습]

5. 선택자 더 알아보기

1. 선택자 유형

2. 속성 선택자 기호

[실습]

6. 의사 클래스와 의사 요소

1. 의사 클래스

2. 자주 쓰이는 의사 클래스들

3. 의사 요소

4. 자주 쓰이는 의사 요소들

[실습]

7. Mini project. 나만의 채팅방 만들기

[CSS 강의 2일차 후기]

[참고 자료]

[HTML/CSS] 과제 2일차 (XML과 XHTML의 다른 점?)

[HTML/CSS] 과제 3일차 (UX와 UI 차이)

0개의 댓글

1. 요소의 유형 `<display>`

1. `<display>`

2. `<display>` 속성에 지정할 수 있는 대표적인 설정들

2. 문서의 흐름 `<float>`

2. `<float>`

3. `<float>` 속성 역효과 방지

3. 위치 지정하기 `<position>`

1. `<position>` 속성

2. `<position>`의 유형

4. 겹치거나 넘치는 요소 다루기 `<z-index, overflow>`

2. `<overflow>` 속성

3. `<overflow>` 속성값