inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

1. 웹개발 기초 [HTML, CSS]

css 적용 문제

269

김민정

작성한 질문수 1

0

<!DOCTYPE html>
<html lang="en">
<head>
    <title>animation information</title>
   
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"href="main.css">
   
    <style>

        body
        {
            margin:0px;
        }

        header
        {
            position: relative;
            top: 0px;
            width:100%;
            min-width: 1280px;
            height:10vh;
            background-color: hotpink;
        }

        main
        {
            position: relative;
            top: 0px;
            width:100%;
            min-width: 1280px;
            height:90vh;
            background-color: rgb(130, 126, 231);
        }
       
        footer
        {
            position: relative;
            top: 0px;
            width:100%;
            min-width: 1280px;
            height:5vh;
            background-color: hotpink;
        }

        nav    
        {          
            position : relative;
            top: 0px;
            width: 1280px;
            margin:0px auto;
            min-width: 1280px;
            height:100%;
            background-color: rgb(255, 255, 255);
        }    

        button1
        {
            position: relative;
            float: left;
            top: 10px;
            width: 140px;
            cursor: pointer;
        }
        button2
        {
            position: relative;
            top: 10px;
            float: left;
            width: 140px;
            cursor: pointer;
        }
        button3
        {
            position: relative;
            top: 10px;
            float: left;
            width: 140px;
            cursor: pointer;
        }
        button4
        {
            position: relative;
            top: 10px;
            float: left;
            width: 140px;
            cursor: pointer;
        }
        main section1
        {
            position: relative;
            top: 100px;
            width: 600px;
            height: 600px;
            border: 1px solid black;

        }
    </style>
</head>

<body>
   
   <header class = "header">
    <nav class= "nav" >
        <button class="button1">소개</button>
        <button class="button2">추천</button>
        <button class="button3">알림</button>
        <button class="button4">소통</button>
      </div>
    </nav>
   
   </header>
   
   <main class="main">
       <section class="section1">

       </section>
   </main>

   <footer class="footer">

   </footer>
</body>
</html>
 
visual studio code 사용해서 하고있는데, css 적용이 안됩니다 ㅠㅠ

HTML/CSS

답변 1

0

개발자Park

안녕하세요. 개발자Park입니다.

클래스이름을 가리킬 경우 .을 사용해주셔야 됩니다.

아래처럼 변경해주시면 되겠습니다.

태그일 경우에는 .을 사용안합니다.

감사합니다.

(예시/수정된 코드일부)

 

      .button4

        {

            position: relative;

            top: 10px;

            float: left;

            width: 140px;

            cursor: pointer;

        }

        main .section1
        {

            position: relative;

            top: 100px;

            width: 600px;

            height: 600px;

            border: 1px solid black;



        }
 

0

김민정

감사합니다 ㅠㅠㅠ

part3. spy 쪽 / part3,part4 강의자료

0

29

2

최종 코드

0

34

2

Open AI 결제

0

37

2

figma 파일을 받을 수가 없어요

0

46

1

다운로드 연결이 되지 않을 때는 어떻게 해야할까요?

0

34

1

Visual Studio Code 대신 Pycharm 써도 되나요?

0

41

2

커서, 클로드, 피그마는 모두 유료버전을 사용해야하나요?

0

51

1

구글 서치콘솔 도메인 소유권 확인 실패

0

34

2

antigravity로 하던 작업 이제 visual code로 하면 되는 거죠?

0

56

1

css 안먹어요

0

172

1

폼테그 안에 메소드

0

210

1

자동완성 설정하는 방법?

0

378

1

html 구조 설계 진행 방식

0

311

1

form태그 method 질문

0

226

1

html 태그 질문

0

261

1

행과 열

0

332

2

자꾸 이런 창이 뜹니다

0

235

1

Value 값에 대해서

0

213

1

어느 순간부터 키가 제대로 안먹힙니다...

0

361

1

다중커서

0

317

2

링크 거는거 설명해주실때 네이버로 하는거 보여주시는데 a태그 건다고 할때 a뒤에 어떤기호인가요? 그냥 점으로 하면 안되는 것 같아서 여쭤봅니다

0

192

1

main이 적용이 안됩니다ㅜ

0

294

2

LIVE SERVER 문제

0

263

1

소스를 좀 볼수있을까요?

1

291

3