공부일지

230302_수업_HTML 기초문법 본문

Computer/공부정리

230302_수업_HTML 기초문법

이르리의 공부일지 2023. 3. 3. 09:09

 

 

 

1. C드라이브 내 폴더 생성

-c:/gwangju2023/HTML_기초

 

2. notepad++ 설치

 

3. html 기초문법 공부

 

문법 내용
*큰 따옴표 필요없이 글자 쓸 때에는 []로 묶어서 씀  
<br/>
<hr/>		 -<br/> : 다음 줄
-<hr/>: 행 나누는 선 긋기
<!DOCTYPE html>
<html>		  
<!DOCTYPE html>
<html>

<head>
<title>[제목]</title>
</head>

<body>
[제목이나 단락]
</body>

</html>		 기본 형식
<head>
<title>[페이지명]</title>
</head>		 html 창 띄울 때 창 링크에 보이는 제목
<body>
[제목이나 단락]
</body>		 -제목은 <h1>, <h2>, ...
-단락은 <p>로
<body>
<h1>가장 큰 제목 : h1</h1>
<h2>둘째 큰 제목 : h2</h2>
<h3>셋째 큰 제목 : h3</h3>
<h4>넷째 큰 제목 : h4</h4>
<h7>h7은 어떻게 나오지?</h7>
</body>		 -body 내부 제목짓기
<body>
<p>
안녕하세요. HTML 입니다.
<br/>
오늘은 HTML을 사용합니다.
<br/>
p태그는 문단(단락)을 의미합니다.
<br/>
</p>
</body>		  
<body>
<a href="URL">[URL이름]</a>
</body>		 -key : value = a : href
a : 주소링크
href : URL 주소 or 현재 창(.html)
*a 태그 안에 img 태그 넣으면 이미지 눌렀을 때 a 태그 해당링크로 이동
<body>
<img src="URL"  width="수치" height="수치" title="이미지 설명" alt="이미지 없을 때 나오는 설명"
</body>		 *말풍선
-title: 이미지 설명(마우스 올리면 나옴)
-alt: 이미지 없으면 나오는 설명
<p>
<cite></cite>
</p>		 캡션:  이미지 아래 설명
<body>
<pre>
[단락내용]
</pre>
</body>		 -자동 줄바꿈 되고 쓰는대로 써진다.
a 태그처럼 태그 안에 태그도 가능
<OO style="스타일 종류 ; "> -OO : 태그명
-style="background-color : lightblue;" :글자 배경색
-style="color : lightblue;" :글자 색
-style="font-size:200%;" : 글자크기
-style="font-align : center;" :정렬
*꼭 ';'로 마지막에 해주자(끝이라는 뜻)
<b></b>
<strong></strong>		 글자 강조 by 진하게
<i></i> 이탤릭체
<q></q> 쌍따옴표 넣기
<blockquote></blockquote> -블록 지정 : 탭 띄워서 표현됨
<address></address> 정보 특수하게 표현
<OO style ="OO : [색상]"> 색상
-색상명
-rgb(O,O,O): 0~255단위
-16진수(0~f): #ff0000 혼합
1. 인라인
<p style="background-color:orange">
        이것은 햄버거입니다. 색상이 지정됩니다.
</p>


2. 내부 방식
<head>
<style>
        body {background-color : lightgray;}
        h3 {color : red;}
        p {color : green;}
</style>
</head>

3.외부 방식
<link rel="stylesheet" href="./css/09_css.css">
 스타일 지정
1. 인라인 방식 :  태그 내에
2. 내부 방식 : <style></style> 안에 각각 지정(<style>은 <head> 안에)
3. 외부 방식 : 따로 저장해서 

외부방식, 내부방식 둘 다 많이 씀
p {
            color : blue;
            font-size : 160%;
            font-family : courier;
            border : 1px solid red;
            padding : 30px;
            margin : 50px;
        }
 -글자 색
-글자 크기
-글자체
-선
-여백
-전체 여백?
<style>
        #p01 {
            color : red ;
        }
        .p02 {
            color : blue;
        }
    </style>

...
<p id="p01">
    : 같은 이름의 태그 중에 특정 태그만 별도로 스타일을 달리할 때</p>
    <p>
  
<p class="p02">
        id와 동일하게 특정 태그들을 지정할 때 사용
</p>
 -id 정해서 스타일 지정
<style>
        a:link {
            color : green;
            background-color : transparent;
            text-decoration : none;
        }
        a:visited {
            color : pink;
            background-color : transparent;
            text-decoration : none;
        }
        a:hover
        {
            color : red;
            background-color : transparent;
            text-decoration : underline;
        }
        a:active
        {
            color : yellow;
            background-color : transparent;
            text-decoration : underline;
        }
    </style>
 기본 스타일(?)
 
  
 
  

'Computer > 공부정리' 카테고리의 다른 글

[python]재밌는 import sys  (0) 2023.03.04
[FE]참고 사이트_html, css  (0) 2023.03.03
230303_수업_html 테이블 외, css  (0) 2023.03.03
2023_수업 순서(230126~230713)  (0) 2023.03.02
230301_보충수업_python_Class  (0) 2023.03.02
'Computer/공부정리' Related Articles more