평택코딩부트캠프 5일차

First Penguin·2023년 9월 27일

CSS JavaScript frontend html 평택코딩부트캠프

평택코딩부트캠프

목록 보기

1/25

1. 오늘 새롭게 알게 된 것

돌발 Quiz
Q1. id => #
아이디는 unique 하게 사용할 때 적용할 것!
Q2.개쉬땅나무 ??

first-child 적용 안되는 사례

<!DOCTYPE html>
<html>
    <head>
        <title>5-17.etc_structureFalse</title>
    </head>
    <style>
        li > a:first-child {
            color: red;
        }
    </style>
    <body>
        <ul>
            <li><a href="#">주의 사항 1</a></li>
            <li><a href="#">주의 사항 2</a></li>
            <li><a href="#">주의 사항 3</a></li>
            <li><a href="#">주의 사항 4</a></li>
            <li><a href="#">주의 사항 5</a></li>
        </ul>
    </body>
</html>

font size %, em으로 주기

<!DOCTYPE html>
<html>
    <head>
        <title>5-20.CSSUnit_percent</title>
        <style>
            p:nth-child(1) {
                font-size: 100%;
            }
            p:nth-child(2) {
                font-size: 200%;
            }
            p:nth-child(3) {
                font-size: 300%;
            }
            p:nth-child(4) {
                font-size: 400%;
            }
        </style>
    </head>
    <body>
        <p>
            1. 새로운 연구에 따르면, 일상적인 운동은 건강에 매우 긍정적인 영향을
            미칠 수 있습니다. 꾸준한 운동 습관은 신체적인 건강 뿐만 아니라
            정신적인 건강에도 도움이 됩니다. 운동은 심혈관 건강을 개선하고
            스트레스를 감소시키는 데 도움이 됩니다.
        </p>
        <p>
            2. 최근 발표된 보고서에 따르면, 온라인 쇼핑은 오프라인 매장보다 더
            많은 사람들에게 인기를 끌고 있으며, 편리한 쇼핑 경험을 제공합니다.
            온라인 쇼핑은 다양한 제품을 쉽게 비교할 수 있고, 편리한 배송 옵션을
            제공합니다.
        </p>
        <p>
            3. 지난 주에 열린 국제 회의에서, 기후 변화에 대한 긴급한 대책을
            마련하기 위한 다양한 논의가 진행되었습니다. 세계 각국은 이 문제에
            대한 공동 노력을 강화하고 있으며, 친환경 에너지 및 지속 가능한
            개발에 대한 방안을 모색하고 있습니다.
        </p>
        <p>
            4. 인공 지능 기술은 현재 많은 분야에서 혁신적인 변화를 가져오고
            있으며, 미래에는 인간의 일상 생활에 더욱 통합될 것으로 예측됩니다.
            자율 주행 자동차, 의료 진단 및 언어 번역과 같은 분야에서 인공 지능
            기술은 놀라운 발전을 이루고 있습니다.
        </p>
    </body>
</html>

      <style>
            p:nth-child(1) {
                font-size: 1em;
            }
            p:nth-child(2) {
                font-size: 2em;
            }
            p:nth-child(3) {
                font-size: 3em;
            }
            p:nth-child(4) {
                font-size: 4em;
            }
        </style>

결과는 동일하게 나온다.

2. 어떤 과정에서 에러가 발생하고 그것을 해결한 과정

li > a:first-child 에 색상을 red로 주었지만 적용되지 않았다.

<!DOCTYPE html>
<html>
    <head>
        <title>5-17.etc_structureFalse</title>
    </head>
    <style>
        li > a:first-child {
            color: red;
        }
    </style>
    <body>
        <ul>
            <li><a href="#">주의 사항 1</a></li>
            <li><a href="#">주의 사항 2</a></li>
            <li><a href="#">주의 사항 3</a></li>
            <li><a href="#">주의 사항 4</a></li>
            <li><a href="#">주의 사항 5</a></li>
        </ul>
    </body>
</html>

모두 다 선택이 되었다... ❌

결국 해결! ✅

<!DOCTYPE html>
<html>
    <head>
        <title>5-18.etc_structureTrue2</title>
        <style>
            li:first-child > a {
                color: yellowgreen;
            }
            li:last-child > a {
                color: red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">https://naver.com</a></li>
            <li><a href="#">https://google.com</a></li>
            <li><a href="#">https://instagram.com</a></li>
        </ul>
    </body>
</html>

li한테 먼저 first-child 속성을 적용해주어야 한다. 일단 부모 속성을 먼저 select 해줘야 적용이 되었다. 또 li tag는 ul tag 안에 넣어주어야 last child 속성이 적용이 되었다. ul tag가 순번을 적용해주는 역할을 하나보다. 그런데? 아래와 같이 div 안에 넣어주어도 정상적으로 적용이 되었다. 부모(상위태그)가 중요한 것 같다.

  <div>
            <li><a href="#">https://naver.com</a></li>
            <li><a href="#">https://google.com</a></li>
            <li><a href="#">https://instagram.com</a></li>
  </div>

marginPadding

<!DOCTYPE html>
<html>
    <head>
        <title>6-2.box_marginPadding</title>
        <style>
            div {
                width: 50px;
                height: 150px;
                background-color: white;
                border: 5px solid black;
                margin: 10px;
                padding: 30px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

margin 이랑 padding 속성에 값을 하나만 설정하면 상,우,하,좌에 같은 값을 할당한다.(시계방향으로)

border

<!DOCTYPE html>
<html>
    <head>
        <title>6-7.border_radiusEach</title>
        <style>
            .box {
                border-width: thick;
                border-style: dashed;
                border-color: teal;
                border-radius: 50px 40px 20px 10px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <h1>
                "김민재 34.32km/h 미친 속도, 분데스 수비수 스피드 '3위'
                등극"…놀랍게도 1위-2위는 팀 동료, 투헬 "유럽에서 가장 빠른 포백
                원한다"
            </h1>
        </div>
    </body>
</html>

border-radius 테두리에 곡선형을 주는 속성인데 상,우,하,좌 순으로 값을 할당한다. padding, margin과 동일하다.

display

inline: 인라인 형태
inline-block : 블럭과 인라인의 중간 형태
block : 블럭 형태

3. 오늘 배움에서 느낀점

배경화면을 설정할 때 파일경로를 잘 알아보고 설정해주어야겠다. ./ 이거랑 ../의 개념 차이를 명확하게 알아야겠다. 이제 곧 추석인데 지금까지 배온 내용들을 전체적으로 정리해보는 시간을 갖자. 무언가를 만들어보면서 해봐야 실력이 오를 것 같다..

4. 오늘 배움에서 궁금했던 점

background-image: url("background.jpg"),url(background2.jpg)
이미지 url(경로)를 지정해줄 때 큰따옴표도 적용이 되었고 그냥 파일이름도 인식이 되었다. style 태그 안에서는 다 적용이 되는 걸까? body에서는 img 태그로 사진을 불러올 경우에는 src 속성에서 string 타입을 요구했다.

오늘의 Quiz

Q1.CSS도 HTML처럼 형태로 주석을 사용합니다. (X)

Q2. 2em은 2배를 나타내는 크기 단위입니다. (O)

Q3. URL을 지정할 때는 url ( ) 형태의 코드를 사용합니다. (O)

Q4 . header a 어떤 태그를 선택 ?
➡️ A.코드에서 모든 a 태그를 선택한다

➕
수업때 해보지 못한 것을 구현해보았다.
background-attachment: scroll;

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("./background.jpg");
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow-y: scroll;
    height: 300px;
    width: 300px;
}