본문 바로가기
부트캠프

[TIL] 유데미X사람인 취업 부트캠프 5일차 / css grid, UTF-8 유니코드

by 상똥 2023. 12. 19.

[1. 오늘 배운 것]

1. %단위 작업

- width: n%; => 부모 너비의 n%를 사용 (반응형)

- height: n%; => 부모 높이의 n%를 사용 (반응형)

 

2. 상단 탐색 모음 완료하기

- css

header a{
    color:rgb(255, 251,0);
    text-decoration: none;
    font-size: 20px;
    padding: 12px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-sizing:border-box;
}

header a:hover{
    color:rgb(77, 77, 77);
    background-color: rgb(255, 251, 0);
}

- 결과

3. highlight섹션 만들기

- html에서 strong으로 두꺼운 글씨 효과를 줄 수 있다.

- html

<section id="hightlights">
            <h2>hightlights</h2>
            <ul id="destinations">
                <li class="destination">
                    <img src="/images/places/miami.jpg" alt="miami">
                    <p>Miami <strong>USA</strong></p>
                </li>
                <li class="destination">
                    <img src="/images/places/munich.jpg" alt="munich">
                    <p>Munichi <strong>Germany</strong></p>
                </li>
                <li class="destination">
                    <img src="/images/places/barcelona.jpg" alt="barcelona">
                    <p>Barcelona <strong>Spain</strong></p>
                </li> 
            </ul>
        </section>
    </main>

 

 

4. 플렉스 컨테이너 구축하기

- css

#destinations{
    display: flex;
    width:90%;
    margin: auto;
    margin-bottom: 40px;
    justify-content: center;
}

.destination img{
    height: 200px;
}

 

 

5. 플렉스 항목 레이아웃

- 이미지 사이즈 같게 하기 : width 설정

.destination img{
    height: 200px;
    width:100%;
}

- 결과

 

6. object-fit으로 이미지 스타일링하기

- css

.destination img {
    height: 300px;
    width: 100%;
    box-shadow: 2px 4px 8px rgb(68, 67, 67);
    border-radius: 10px;
    object-fit: cover;
}

- 결과

- cover 속성을 사용하면 컨테이너 안에 이미지가 들어갈 때 종횡비를 유지하면서 들어갈 수 있는 만큼만 들어감

 

7. 텍스트 스타일링

- css

#highlights h2{
    text-transform: uppercase;
    text-align: center;
    font-size: 40px;
    color: rgb(59, 65, 64);
    margin: 24px 0;
}

.destination {
    margin: 0 20px;
    text-transform: uppercase;
}

.destination p{
    text-align: center;
    font-size: 24px;
    color: rgb(124, 123, 123);
}

.destination strong{
    color: rgb(0, 160, 117);
}

- 결과

 

8. 부모-자식 마진 축소 이해하기

- highlights의 마진으로 인해 두 요소간 거리 차이가 있음

- padding으로 해결 가능

- css

#highlights{
    padding: 24px;
}

- 결과

 

9. css 함수 작업 - 선형 그라디언트

- 배경 색상에 그라데이션을 주는 작업

- background: linear-gradient(각도, 시작하는 색, 끝나는 색)

- css

#highlights{
    padding: 24px;
    background: linear-gradient(45deg, rgb(227, 255, 253), rgb(202, 243, 240));
}

- 결과

 

10. 푸터 만들기

- html

    <footer>
        <ul>
            <li>
                <a href="https://www.instagram.com">
                    <img src="/images/icons/insta.png" alt="instargram">
                </a>
            </li>
            <li>
                <a href="https://www.facebook.com">
                    <img src="/images/icons/facebook.png" alt="facebook">
                </a>
            </li>
        </ul>
    </footer>

 

11. 푸터 스타일링

- 위, 아래 공간을 주고자 할 때에는 margin보다 padding을 더 선호한다

- css

footer {
    background: linear-gradient(70deg, rgb(24, 24, 24), rgb(25, 29, 29));
    padding: 36px 0;
}

footer ul {
    display: flex;
    justify-content: center;
}

footer li {
    width: 80px;
    height: 80px;
    margin: 0 50px;
}

footer img {
    width: 100%;
    height: 100%;
}

 

12. 장소 페이지 - 개요&준비

- css를 추가할 때 보편적인 스타일이 포함된 css파일을 먼저 추가해주는 것이 중요하다

- shared를 먼저 추가한 다음, places를 추가한다

- html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link
        href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Oleo+Script:wght@700&family=Quicksand:wght@300;500;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="shared.css">
    <link rel="stylesheet" href="places.css">
    <title>Travel Goals</title>
</head>
 <body>
    <header>
        <div id="page-logo">
            <a href="/index.html">Travel Goals</a>
        </div>
        <nav>
            <ul>
                <li><a href="/places.html">Destinations</a></li>
                <li><a href="">About</a></li>
            </ul>
        </nav>
    </header>

	<main></main>
    
    <footer>
        <ul>
            <li>
                <a href="https://www.instagram.com">
                    <img src="/images/icons/insta.png" alt="instargram">
                </a>
            </li>
            <li>
                <a href="https://www.facebook.com">
                    <img src="/images/icons/facebook.png" alt="facebook">
                </a>
            </li>
        </ul>
    </footer>
 </body>

 

 

13. 카드 콘텐츠 만들기

- html

    <main>
        <ul>
            <li>
                <img src="/images/places/barcelona.jpg" alt="Barcelona">
                <div class="item-content">
                    <h2>Barcelona</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus pariatur fuga provident dignissimos maiores magni minus unde itaque ullam maxime, inventore quo commodi nobis incidunt accusamus soluta labore saepe? Incidunt.</p>
                </div>
                <div class="actions">
                    <a href="https://en.wikipedia.org/wiki/Barcelona">Explore</a>
                </div>
            </li>
        </ul>
    </main>

 

 

14. 정적 포지션 사용

- css

header {
    position: static;
}

- 적용 전

- 적용 후

 

15. 카드룩 만들기

- css

main ul{
    width:80%;
    margin: 0 auto;
}

main li{
    display: flex;
    background-color: white;
}

main li img {
    width: 300px;
    height: 200px;
}

.item-content{
    padding: 24px;
}

- 결과

 

16. 카드 완성하기

- html

    <main>
        <ul>
            <li>
                <img src="/images/places/barcelona.jpg" alt="Barcelona">
                <div class="item-content">
                    <div>
                        <h2>Barcelona</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus pariatur fuga provident
                            dignissimos maiores magni minus unde itaque ullam maxime, inventore quo commodi nobis
                            incidunt
                            accusamus soluta labore saepe? Incidunt.</p>
                    </div>
                    <div class="actions">
                        <a href="https://en.wikipedia.org/wiki/Barcelona">Explore</a>
                    </div>
                </div>
            </li>
        </ul>
    </main>

- css

body{
    background: linear-gradient(30deg, rgb(77,77,77), rgb(58,58,58));
    color: rgb(68,68,68);
}
header {
    position: static;
}

main ul{
    width:80%;
    margin: 0 auto;
}

main li{
    display: flex;
    background-color: white;
    box-shadow: 1px 1px 4px rgb(0,0,0,0.2);
    border-radius: 6px;
    overflow: hidden;
}

main li img {
    width: 300px;
    height: 280px;
    object-fit: cover;
}

.item-content{
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.actions{
    text-align: right;
}

.actions a {
    text-decoration: none;
    padding: 6px;
    color: rgb(22, 211, 218);
    border-radius: 5px;
}
.actions a:hover{
    background-color: rgb(235,253, 255);
}

- 결과

 

17. CSS 그리드

- 2차원적 레이아웃에서 유용하게 쓰일 수 있다

- fr : 남아있는 영역 모두를 차지(fraction)

- 2fr 1fr => 2:1비율로 공간 차지

 

18. nth-type 선택자

- n번째 요소에만 원하는 것을 적용할 수 있는 기능

- li:nth-of-type(n){ 적용할 내용 }

 

19. grid-column 선택자

- 요소가 몇 개의 열을 차지해야 하는지 명령

li:nth-of-type(3){
    grid-column: 1/span 2;
}

 

20. 유니코드 UTF-8 작업하기

- Arrows (Unicode block) - Wikipedia 

- 16진법 참조를 위해 숫자 앞에 &#x를 붙여준다

- ex. &#x2192 => 화살표가 표현됨

 

[2. 오늘 잘한 점]

오늘도 밀리지 않고 강의를 잘 수강했다! 면담도 원만히 잘 마쳤다!!

 

[3. 개선해야할 점]

진행하고 있는 개인 프로젝트에 대한 집중력이 좀 떨어지고 있는 것 같다.ㅜㅜ 멀티가 힘들기는 해도 해야 할 일이니까 최대한 할 수 있는 만큼은 해보자!

'부트캠프' 카테고리의 다른 글

[TIL] 유데미X사람인 취업 부트캠프 7일차 / css변수 및 전환, html 양식 요소  (1) 2023.12.21
[TIL] 유데미X사람인 취업 부트캠프 6일차 / 반응형 웹 제작, 유닛과 미디어 쿼리  (0) 2023.12.20
[TIL] 유데미X사람인 부트캠프 4일차 / 깃 브랜치, css flexbox  (1) 2023.12.18
[TIL] 유데미x사람인 취업 부트캠프 3일차 / 웹 제작과 호스팅, 깃 명령어  (0) 2023.12.15
[TIL] 유데미x사람인 취업 부트캠프 2일차 / 웹 이미지 삽입과 css 활용, live server의 사용법  (0) 2023.12.14

관련글

티스토리툴바