HTML | CSS | Javascript (8)

반응형

 

HTML 구성

 

<!-- html버전을 웹브라우저에 알리는 역할, 가장 먼저 선언해야함 -->
<!DOCTYPE html>
<!-- 웹 접근성 속성으로 스크린리더기가 번역할 언어를 지정함 -->
<html lang="ko">
<head>
    <!-- meta : 브라우저와 검색엔진로봇에게 메타정보를 제공하는 태그 -->
    <!-- charset : 문서의 언어 인코딩 지정, 누락시 한글이 깨짐 -->
    <meta charset="UTF-8">
    <title>제목</title>
    <!-- internal style sheet, 내부스타일정의 / header 영역에만 작성할 것 -->
    <style>
    p{
      color: red;
    }
    </style>
</head>
<!-- 사용자에게 보여질 내용을 작성하는 영역 -->
<body>
  <!-- javascript를 작성하는 영역태그/html영역안에서 자유롭게 여러개 작성가능 -->
  <script>
    alert("경고창");
  </script>
  
  <p>메인 페이지</p>
  
  <script>
    console.log("브라우저 우클릭> 검사(개발자모드)에서 디버깅에 많이 사용");
  </script>
  <!-- javascript작성 영역 중 가장 일반적으로 body 종료태그 위에 많이 작성함 -->
</body>
</html>

 

결과 화면1-1 : 페이지 로딩 시 알림창이 뜸

 

결과 화면1-2

 

 

 

list

 

ul, ol, dl을 통해 리스트를 표현할 수 있다.

 

 

  • ul 태그

: li 태그들이 모여 있는 리스트, 순서가 없는 특징을 가지고 있다.

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>제목</title>
    <style>
    ul{
      color: red;
    }
    </style>
</head>
<body>
  <ul style="list-style: square;">
    <li>순서없는 리스트 1</li>
    <li>순서없는 리스트 2</li>
    <li>순서없는 리스트 3</li>
  </ul>
</body>
</html>

 

결과 화면2 : css를 적용하며 붉은 글씨로 표현됨

 

 

 

  • ol 태그

: li 태그들이 모여 있는 리스트, 순서가 있는 특징을 가지고 있다.

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>제목</title>
</head>
<body>
  <ol style="list-style-type: hangul;">
    <li>순서있는 리스트 1</li>
    <li>순서있는 리스트 2</li>
    <li>순서있는 리스트 3</li>
  </ol>
</body>
</html>

 

결과 화면3

 

 

 

  • dl 태그

: dt 태그와 dl 태그들이 모여 있는 리스트, 순서가 없는 특징을 가지고 있다.

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>제목</title>
</head>
<body>
  <dl>
    <dt>리스트제목1</dt>
    <dd>리스트제목1</dd>
  </dl>
</body>
</html>

 

결과 화면4

 

 

반응형

'HTML | CSS | Javascript' 카테고리의 다른 글

[HTML|CSS] 2장 기본 태그  (0) 2024.02.08
[HTML|CSS] 1장 하이퍼링크  (0) 2024.02.08
[HTML/CSS/Script] 12장 함수  (0) 2024.02.01
[HTML/CSS] 10.5장 Test  (0) 2024.01.29
[HTML/CSS/Script] 9장 Script  (0) 2024.01.26
반응형

 

기본 태그

 

: h 태그, br 태그, p 태그 등등이 있다.

자세한 사용 방법은 하단에 기입한다.

 

 

 

h 태그

 

h1부터 h6까지 총 6개가 있으며 숫자가 클수록 가장 작게 표현된다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- heading -->
    <!-- 가장큰 head -->
    <h1>개발자가 알아야 할 기본 태그</h1>
    <!-- 가장작은 head -->
    <h6>개발자가 알아야 할 기본 태그</h6>
    <h7>존재하지 않은 태그는 브라우저가 마음대로 해석</h7>
</body>
</html>

 

결과 화면1

 

 

 

br 태그 & &lt;br&gt; : 줄바꿈 태그

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- line break -->
    <!-- 줄바꿈 -->
    줄바꿈을
    <br>
    하는 방법    
</body>
</html>

 

결과 화면2 : <br>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- line break -->
    <!-- 줄바꿈 -->
    줄바꿈
    <br>
    태그 사용
    <!-- html특수문자표현: 꺽쇠는 태그로 인식되므로 특수문자표현시긍로 문자 그대로 처리 -->
    &lt;br&gt;이라는 태그는 줄넘김처리를 해줌
</body>
</html>

 

결과 화면3

 

 

 

p 태그 : 하나의 문단

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        p{
            background-color: gold;
        }
    </style>
<body>
    <!-- paragraph : 문단을 나타내는 태그, 자동을 ㅗ줄이 바꾸며 줄사이 여백이 생김 -->
    <p>문단을</p>
    나눠주는 태그
</body>
</html>

 

결과 화면4

 

 

 

pre 태그

 

: 미리 정의된 형식(preformatted)의 텍스트를 정의할 때 사용

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- preformatted: 미리 정의된 형식, 여백과 줄바꿈도 그대로 드러남 -->
    <pre>
        여기는              내가        작      성  하는
        그  대      로      표현됨
    </pre>
</body>
</html>

 

결과 화면5

 

 

 

hr 태그 : 수평선

 

: 수평선을 생성해줌

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- horizontal : 수평선 생성 -->
    수평선
    <hr>
    생성
</body>
</html>

 

결과 화면6

 

 

반응형

'HTML | CSS | Javascript' 카테고리의 다른 글

[HTML|CSS] 3장 HTML 구성과 list  (0) 2024.02.08
[HTML|CSS] 1장 하이퍼링크  (0) 2024.02.08
[HTML/CSS/Script] 12장 함수  (0) 2024.02.01
[HTML/CSS] 10.5장 Test  (0) 2024.01.29
[HTML/CSS/Script] 9장 Script  (0) 2024.01.26
반응형

 

HTML (Hyper Text Markup Language)

 

: 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것.

 

웹 페이지 (web page) : 월드 와이드 웹 상에 있는 개개의 문서

 

 

 

하이퍼링크

 

a 태그로 감싼 형태로 href에 url을 기입한다.

target으로 새 창에서 열지, 기존 창에서 열지 등등을 결정할 수 있다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- target기본값_self,생략가능 -->
    <a href="https://www.naver.com/" target="_blank">네이버로 이동</a>
</body>
</html>

 

결과 화면1 : 클릭 시 새로운 창으로 네이버 이동

 

 

 

  • list, class, id 활용
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

<style>
    .box{
        border-style:  solid;
        height: 1000px;
    }
</style>
</head>
    <ol>
        <!-- # id / . class -->
        <li><a href="#d1">영역1 가기</a></li>
        <li><a href="#d2">영역2 가기</a></li>
        <li><a href="#d3">영역3 가기</a></li>
        <li><a href="#d4">영역4 가기</a></li>
    </ol>

    <!-- class는 공통사용가능, id는 유일해야함 -->
    <div class="box" id = "d1">영역1</div>
    <div class="box" id = "d2">영역2</div>
    <div class="box" id = "d3">영역3</div>
    <div class="box" id = "d4">영역4</div>
</body>
</html>

 

결과 화면2-1

 

결과 화면2-2 : 영역4 가기 클릭 시 이동 화면

 

 

반응형

'HTML | CSS | Javascript' 카테고리의 다른 글

[HTML|CSS] 3장 HTML 구성과 list  (0) 2024.02.08
[HTML|CSS] 2장 기본 태그  (0) 2024.02.08
[HTML/CSS/Script] 12장 함수  (0) 2024.02.01
[HTML/CSS] 10.5장 Test  (0) 2024.01.29
[HTML/CSS/Script] 9장 Script  (0) 2024.01.26
1 2 3