중급 CSS

JOOYEUN SEO·2024년 10월 1일

CSS html udemy

100 Days of Python

목록 보기

44/76

🗂️ Day44 프로젝트: 개인 웹사이트4

개인 CV 웹사이트 최종본

🔍 유의 사항

🗂️ Day42 프로젝트 : 개인 웹사이트 2의 업그레이드

CSS로 인터페이스 ㅇㄹㅁㅇㄹㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㅇ

❖ Favicon

Favorite Icon 의 줄임말
웹사이트의 주소창, 페이지 탭, 북마크 등에 표시되는 작은 아이콘
파비콘 제작 사이트

🏗️ index.html

…
<head>
    …
    <link rel="stylesheet" href="css/styles.css">
    <link rel="icon" href="favicon.ico">
</head>

아이콘을 같은 프로젝트 폴더에 넣고 링크

❖ HTML Div

<div>

특수한 html 요소로, 웹사이트의 컨텐츠를 개별의 박스로 분할
각각의 div를 개별적으로 구조화 가능
div로 CSS를 사용해야 작용함

🏗️ index.html

<body>
    <div>
        <h1>I'm name.</h1>
        <p>a programmer.</p>
    </div>
…

🎨style.css

body {
    margin: 0;     /* 웹페이지 모든 가장자리의 여백(브라우저 기본 스타일)을 없앰 */
}

h1 {
    margin-top: 0; /* 제목 상자 윗면의 여백을 없앰 */
}

div {
    background-color: #EDDFE0;
}

❖ CSS 박스 모델

크롬 개발자 도구에서 확인 가능

div 또는 box의 구성

margin(여백) : 박스와 화면에 있는 다른 것들 사이의 완충구역 (박스 길이에 미포함)
- border(경계) : 테두리 선(굵게 하거나 0으로 무시, 박스 길이에 포함)
  - padding(공백) : 경계와 콘텐츠 사이의 공간 (박스 길이에 포함)
    - 콘텐츠 : 콘텐츠에 맞게 자동으로 박스 크기 지정 or 직접 박스에 높이/폭을 설정

→ 박스들을 화면에 배치하려면 여백, 경계, 공백, 콘텐츠의 길이를 모두 더해서 위치를 계산해야 한다

🏗️ index.html

<body>
    <div class="top-container">
        <h1>I'm name.</h1>
        <p>a programmer.</p>
    </div>
    <div class="middle-container"></div>
    <div class="bottom-container"></div>
</body>

밑의 박스는 그 위의 박스의 너비를 계산 → 너비만큼 왼쪽 마진을 설정

❖ CSS 디스플레이 속성

HTML 요소에는 4가지 종류의 값이 존재
(CSS 파일에서 해당 요소에 display: 값 으로 변경 가능)

block
- 웹페이지의 화면 폭 전체를 차지하는 요소
- 다른 모든 요소가 해당 요소의 옆에 있지 못하도록 차단(blocking)
- block 요소 예시
  - paragraphs : <p>
  - headers : <h1> ... <h6>
  - divisions :<div>
  - lists & list items : <ol>, <ul>, <li>
  - forms : form
inline
- 높이와 폭에서 필요한 만큼의 공백만 차지함 (폭을 따로 조절하지 못 함)
- 다른 요소들이 같은 라인에 나타나는 것을 차단하지 않음
- block 안에서 사용하여 특정 부분만 따로 스타일링할 수도 있음
- inline 요소 예시
  - spans : <span>
  - anchors : <a>
inline-block
- block과 inline의 장점을 합함
- 요소들이 같은 라인에 있을 수 있으면서도 폭을 원하는 대로 조절 가능
- inline-block 요소 예시
  - images : <img>
none
- 아무 것도 표시하지 않음
- 화면에서 무언가를 감춰야 할 때(퀴즈의 정답 등) 사용 가능
  - 방법1
    - css 파일에서 html 요소의 display값을 none으로 변경
    - html에서 아예 삭제한 것처럼 나타남
  - 방법2
    - css 파일에서 html 요소의 visibility값을 hidden으로 변경
    - 원래 위치를 유지한 채로 사라짐 (볼 수만 없을 뿐 여전히 그 자리에 있음)

❖ CSS 포지셔닝

CSS의 Position 속성 4가지

💡 CSS의 Coordinates(좌표) 속성

position 뿐만 아니라 좌표 속성의 값도 설정해야 실제로 요소를 이동할 수 있음

top, bottom, left, right

◇ 정적 포지셔닝

정적(static) Positioning
HTML 규칙을 따른 기본 레이아웃

규칙1: 콘텐츠가 요소를 표시하는 방법, 높이 및 폭을 결정한다 (CSS와 무관)
규칙2: 화면에 나오는 요소들의 배치 순서는 작성된 HTML 코드를 따름
규칙3: 하위 개체(자식)가 상위 개체(부모)의 위에 높임
- 예) <div> 안에 <h1>를 추가하면 상자 위에 제목이 올라감
- 화면에서 $z$ 축으로 요소 위에 요소를 쌓음

◇ 상대적 포지셔닝

상대적(relative) Positioning
원래 위치를 기준으로 위치 변경 가능

좌표 속성 설정
- top : 아래로 밀림
- bottom : 위로 밀림
- left : 오른쪽으로 밀림
- right : 왼쪽으로 밀림
개체를 이동하기 전 원래 위치에서 설정한 방향으로 margin을 추가하므로 단어와 반대로 작용
상대적 위치를 가진 요소를 이동시켜도 화면에 있는 다른 것들의 위치에 영향을 미치지 않음
- 이동시키기 전 위치는 그대로 유지됨(유령 요소가 남아있는 것과 같음)
- 이동한 자리에 다른 개체가 있으면 그 개체를 덮음

◇ 절대적 포지셔닝

절대적(absolute) Positioning
상위 개체를 기준으로 위치 변경 가능

좌표 속성 설정
- top : 위로 이동
- bottom : 아래로 이동
- left : 왼쪽으로 이동
- right : 오른쪽으로 이동
상위 개체 = position의 값이 static이 아닌 부모(없을 경우 웹페이지 body의 전체)
개체의 상위 요소에 margin을 추가하여 이동하는 것
상대적 포지셔닝과 달리 실제로 요소를 자연적인 html의 흐름에서 꺼내는 것과 같음
- 요소의 이동이 다른 개체들의 위치에 영향을 미침

◇ 고정 포지셔닝

고정(fixed) Positioning
웹페이지의 body에 대해 상대적으로 자리가 고정됨

웹페이지를 스크롤 업/다운 해도 계속 같은 자리에 머무름

❖ 요소를 중앙에 배치

body에 text-align: center; 를 추가하는 방법
- block, inline-block인 elements에만 적용
- 바디 안의 요소들 중 따로 폭이 설정되지 않은 것들에만 일괄적용됨
  (특정 요소의 폭을 설정하면 그 요소만 가운데 정렬이 풀림)
해당 element의 margin 속성을 이용하는 방법
- 값을 auto로 설정하면 요소를 수직 또는 수평으로 중앙에 정렬 가능
- 수평 중앙에 정렬하려면 margin: 0 auto 0 auto; 으로 설정
  - 값 순서대로 윗단, 오른쪽단, 아랫단, 왼쪽단의 여백을 의미 (🕰️ 시계방향)
  - margin: 0 auto;로 간단하게 위/아랫단, 양쪽단 설정 가능
position: absolute 속성으로 꺼내는 방법
- 여러 요소들이 같은 라인에 위치한 경우 중앙에 배치하려는 element를 제외하고 꺼내기

❖ 폰트 스타일링

font-family 속성에서 쓰이는 폰트의 계열

일반적인 웹사이트 스타일링에 주로 사용됨
- Sans-serif : 글자의 끝부분이 반듯하게 떨어지는 글씨체 (기본값은 대부분 Arial)
- Serif : 글자의 끝부분에 발이 달린 글씨체 (기본값은 대부분 Times)
코드 입력에 적합
- monospace : 텍스트 안의 모든 문자가 동일한 폭을 차지
가독성이 낮아서 잘 안 쓰임
- cursive : 손글씨 스타일의 폰트
- fantasy : 고대문서? 스타일의 폰트

대략적인 폰트 계열의 앞에 구체적인 폰트를 추가 가능 (비슷한 느낌의 폰트끼리 묶어야 함)
font-family: verdana, sans-serif; 의 경우
verdana체를 우선 사용, verdana체가 사용 불가 상태라면 sans-serif체를 사용

↓
CSS Web Safe Fonts

대부분의 OS가 정확하게 렌더링할 수 있는 폰트 계열 확인 가능
로컬에서 디자인할 때 직접 보는 것과 똑같이 렌더링될 가능성이 높음
(다만 100% 완벽히 구현되는 폰트는 없음)

↓
font embedding을 통해 모든 사람이 설정된 폰트를 볼 수 있다
Google Fonts에서 원하는 폰트들로 font family를 만든 후 링크를 복사
(🏗️ index.html의 head에서 링크하여 웹사이트에 임베딩)

❖ 콘텐츠 추가

Lorem Ipsum 생성기

아직 콘텐츠가 없을 때 실제 텍스트가 들어갈 자리에 대신 넣어 놓는 의미없는 문장
원하는 단어, 문장, 단락 수를 설정하여 생성 가능
예) Lorem ipsum odor amet, consectetuer adipiscing elit.

❖ CSS 사이즈 조절

정적 사이즈
- px 단위로 크기를 지정
- 브라우저의 기본 설정(폰트 크기 등)을 변경해도 설정한 크기를 유지
동적 사이즈
- 방법1
  - % 로 크기를 지정 ( $100\%=16px$ 정도)
  - 브라우저의 기본 설정에 따라 크기가 확대/축소됨
- 방법2
  - em 단위로 크기를 지정 (텍스트를 기울임체로 바꾸는 <em> 태그와 다름)
  - em은 대문자 M의 폭을 의미 ( $1em=100\%=16px$ )
- 동적 사이즈는 상속됨
  - 상위 개체에서 상속받은 동적 사이즈 + 하위 개체에서 설정한 동적 사이즈
    = 하위 개체의 사이즈가 되기 때문에 사이즈가 매우 커질 위험이 있음
  - 방법3: rem 단위는 "root em"의 줄임말로, 모든 상위 설정을 무시
    - 가장 안정적이므로 추천
    - 단, 여백이나 패딩 등을 설정할 때는 쉬운 계산을 위해 px이 더 좋을 수 있음

❖ CSS Float 및 Clear

Float 속성

float 속성을 적용한 요소는 띄워서 배치 가능
해당 요소의 주위로 다른 요소들이 흐름(감싸는 느낌)
이미지 옆에 텍스트 배치 가능(하지만 강의에서는 레이아웃과 포지셔닝에 플로팅 사용을 지양 권장)
값
- left(왼쪽으로 띄움)
- right(오른쪽으로 띄움)

Clear 속성

float 속성이 적용되지 않도록 해제
해당 요소가 float 속성이 적용된 요소의 주위로 흐르는 것을 방지하는 역할
값
- left(왼쪽을 해제)
- right(오른쪽을 해제)
- both(양쪽을 모두 해제)

❖ 스타일이 첨가된 웹사이트 완성

css 버튼 생성기로 원하는 스타일의 버튼 생성 후 코드 복사

🏗️ index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>name's Personal Site</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="icon" href="favicon.ico">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Sacramento&display=swap" rel="stylesheet">
</head>

<body>
    <div class="top-container">
        <img class="top-cloud" src="images/cloud.png" alt="cloud">
        <h1>I'm name.</h1>
        <h2>a <span class="pro">pro</span>grammer.</h2>
        <img class="bottom-cloud" src="images/cloud.png" alt="cloud">
        <img src="images/mountain.png" alt="mountain">
    </div>

    <div class="middle-container">
        <div class="profile">
            <img src="images/profile-avatar.png" alt="profile picture">
            <h2>Hello.</h2>
            <p class="intro">Lorem ipsum dolor sit amet, vitae volutpat, dui conubia, dolor urna. Non auctor, montes nulla distinctio.</p>
        </div>
        <hr>

        <div class="skills">
            <h2>My Skills.</h2>
            <div class="skill-row">
                <img class="computer-img" src="images/computer.png" alt="computer">
                <h3>Lorem & Ipsum</h3>
                <p>Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros.</p>
            </div>

            <div class="skill-row">
                <img class="game-img" src="images/game.gif" alt="game">
                <h3>Lorem Ipsum Dolor</h3>
                <p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu, rutrum nam.</p>
            </div>
        </div>
        <hr>

        <div class="contact-me">
            <h2>Get In Touch</h2>
            <h3>Lorem ipsum dolor sit amet, non elit.</h3>
            <p class="conatact-message">Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
            <a class="btn" href="mailto:name@email.com">CONTACT ME</a>
        </div>
    </div>

    <div class="bottom-container">
        <a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a>
        <a class="footer-link" href="https://twitter.com/">Twitter</a>
        <a class="footer-link" href="https://www.appbrewery.co/">Website</a>
        <p class="copyright-message">© 2024 Name Surname.</p>
    </div>
</body>
</html>

🎨style.css

body {
    color: #bf7f7f;
    margin: 0;
    text-align: center;
    font-family: "Merriweather", serif;
}

/* 제목 */
h1 {
    color: #4f3f38;
    margin: 50px auto 0 auto;
    font-size: 5.625rem;
    font-family: "Sacramento", cursive;
}

h2 {
    color: #4f3f38;
    font-size: 2.5rem;
    font-weight: normal;
    font-family: "Montserrat", sans-serif;
    padding-bottom: 10px;
}

h3 {
    color: #705C53;
    font-family: "Montserrat", sans-serif;
}

/* 단락에서 줄 간 간격 넓히기 */
p {
    line-height: 2;
}

/* 수평선 */
hr {
    border: dotted #F5F5F7 6px;
    border-bottom: none;
    width: 5%;
    margin: 100px auto;
}

/* 앵커 태그 */
a {
    color: #4f3f38;
    font-family: "Montserrat", sans-serif;
    margin: 10px 20px;
    text-decoration: none;
}

a:hover {
    color: #f5f5f7;
}

/* 상자 */
.top-container {
    background-color: #EDDFE0;
    position: relative;
    padding-top: 100px;
}

.middle-container {
    margin: 100px 0;
}

.bottom-container {
    background-color: #EDDFE0;
    padding: 50px 0 20px;
}

/* 갹종 여백 및 디테일 */
.skill-row {
    width: 50%;
    margin: 100px auto;
    text-align: left;
}

.pro {
    text-decoration: underline;
}

.intro {
    width: 30%;
    margin: auto;
}

.conatact-message {
    width: 40%;
    margin: 40px auto 60px;
}

.copyright-message {
    color: #f5f5f7;
    font-size: 0.75rem;
    padding: 20px 0;
}

/* 이미지 */
.top-cloud {
    position: absolute;
    right: 300px;
    top: 40px;
}

.bottom-cloud {
    position: absolute;
    left: 250px;
    bottom: 300px;
}

.computer-img {
    width: 25%;
    float: left;
    margin-right: 30px;
}

.game-img {
    width: 25%;
    float: right;
    margin-left: 30px;
}

/* CONTACT ME 버튼 */
.btn {
    background: #705c53;
    background-image: -webkit-linear-gradient(top, #705c53, #4f3f38);
    background-image: -moz-linear-gradient(top, #705c53, #4f3f38);
    background-image: -ms-linear-gradient(top, #705c53, #4f3f38);
    background-image: -o-linear-gradient(top, #705c53, #4f3f38);
    background-image: linear-gradient(to bottom, #705c53, #4f3f38);
    -webkit-border-radius: 8;
    -moz-border-radius: 8;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    color: #f5f5f7;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
}

.btn:hover {
    background: #eddfe0;
    text-decoration: none;
}