html,css,js 공부

(2024.02.14) 1일차 html

ari0930 2024. 2. 14. 17:20

html은 마크업 언어이다

마크업 언어란 서식이나 구조로 표현하는 언어

 

html은 태그, 요소, 속성 으로 구성되어 있으면

요소는 html 구성하는 부품으로 태그를 이용하여 작성할수 있다 

속성은 태그에 추가정보를 부여한다

 

오늘 배운 html 태그

h => 제목

p=> 단락

br=>줄바꿈

hr=>수평줄

link=> css 를 연결할때 사용하였다

script => js를 연결할때 사용하였다

 

html 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="ex1style.css">  
    <script src="ex1js.js"></script>


</head>
<body>
    <h1>노래</h1>
    <hr>
    <h2>장르</h2>
    <p>발라드</p>
    <p>k-pop</p>
    <p>트로트</p>
    <p id="kk">j-pop</p>
    <br>
    <h2>유명가수</h2>
    <p>아이유</p>
    <p>태연</p>


   
</body>
</html>

 link 뒤에 href에 css파일 주소를 넣어준다

src 뒤에는 js파일의 주소를 넣어준다

css코드

p {
    color: white;
    background: blueviolet;
   

}

h1 {
    color: blue;
}

#kk {
    color: pink;
    background: black;
}

=> 모든 p는 흰색을 글자색과 배경은 보라색으로 지정

=> 모든 h1은 글자색 파란색으로 지정한다 

js코드

alert('what')

=> 사용자가 ok 버튼 누를때 까지 메시지를 보여준다

 

결과물

 

확인 누르고 난인후

 

프레임워크란 특정 목적의 개발을 쉽게 할수 있게 여러 기능을 모아둔것 

반응형

'html,css,js 공부' 카테고리의 다른 글

반응형 웹 만들어보기  (0) 2024.02.21
(2024 02 21)html,css 5일차  (0) 2024.02.21
(2024 02 20) html,css 4일  (1) 2024.02.21
(2024.02.16) 3일차 html,css  (2) 2024.02.17
(2024.02.15)2일차 html  (0) 2024.02.16