HTML CSS의 자기 노트
Qiita에서 실제 사이트와 출력 결과가 다를 수 있습니다(제목 등).며칠 지나면 표시가 바뀔 겁니다.
만약 당신이 잘못된 점을 지적할 수 있다면 나는 매우 기쁠 것이다.
HTML
텍스트를 '태그' 로 묶으면 제목, 링크 등의 뜻이 있습니다.
끝 표시에 "/"를 잊지 마세요!
헤드 요소에 웹 설정에 대한 정보를 쓰다
일례
index.html<head>
<meta charset="utf-8"> <!-- 文字コードの設定 -->
<title>HTML・CSSの自分メモ</title> <!-- ページタイトル -->
<link rel="stylesheet" href="stylesheet.css"> <!-- CSSの読み込み -->
</head>
body 요소에 웹 페이지에 실제로 표시된 내용 쓰기
index.html<!DOCTYPE html> <!-- HTMLのバージョンを指定 -->
<html>
<head>
</head>
<body>
</body>
<html>
다음은 주로 바디 요소로 기술한다
타이틀
h1 요소는 가장 큰 제목이고, h6 요소는 가장 작은 제목이다.
index.html<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
결과 내보내기
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
단락
h2와 p 표시로 둘러싸인 텍스트 줄 바꾸기
index.html<p>hello</p>
결과 내보내기
hello
메모
브라우저에 주석 텍스트 표시 안 함
index.html<!-- コメントだよ -->
링크
a 요소 사용
href 속성을 추가하여 링크 대상의 URL을 지정할 수 있습니다
index.html<a href="http://qiita.com/">Qiita</a>
결과 내보내기
Qiita
이미지 표시
요소를 사용합니다.종료 표시는 필요 없습니다.
src 속성을 추가하여 그림의 링크를 지정할 수 있습니다
폭을 넓히려면 이미지를 생략합니다.
index.html<img src="https://~.jpg">
리스트
리 요소를 사용하여 글머리 기호를 나타낼 수 있습니다.
이때 숫자로 l 요소로 둘러싸일 때 검은 점, ol 요소로 둘러싸는 것을 나타낸다.
또한 css 파일에서list-style 속성에 none을 지정하면 목록의 시작 부분을 삭제할 수 있습니다.
index.html<ul>
<li>C</li>
<li>Java</li>
<li>Python</li>
</ul>
<ol>
<li>JavaScript</li>
<li>Ruby</li>
<li>PHP</li>
</ol>
결과 내보내기
<head>
<meta charset="utf-8"> <!-- 文字コードの設定 -->
<title>HTML・CSSの自分メモ</title> <!-- ページタイトル -->
<link rel="stylesheet" href="stylesheet.css"> <!-- CSSの読み込み -->
</head>
<!DOCTYPE html> <!-- HTMLのバージョンを指定 -->
<html>
<head>
</head>
<body>
</body>
<html>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
Hello World
Hello World
Hello World
Hello World
Hello World
단락
h2와 p 표시로 둘러싸인 텍스트 줄 바꾸기
index.html
<p>hello</p>
hello
메모
브라우저에 주석 텍스트 표시 안 함
index.html
<!-- コメントだよ -->
링크
a 요소 사용
href 속성을 추가하여 링크 대상의 URL을 지정할 수 있습니다
index.html
<a href="http://qiita.com/">Qiita</a>
Qiita
이미지 표시
요소를 사용합니다.종료 표시는 필요 없습니다.
src 속성을 추가하여 그림의 링크를 지정할 수 있습니다
폭을 넓히려면 이미지를 생략합니다.
index.html
<img src="https://~.jpg">
리스트
리 요소를 사용하여 글머리 기호를 나타낼 수 있습니다.
이때 숫자로 l 요소로 둘러싸일 때 검은 점, ol 요소로 둘러싸는 것을 나타낸다.
또한 css 파일에서list-style 속성에 none을 지정하면 목록의 시작 부분을 삭제할 수 있습니다.
index.html
<ul>
<li>C</li>
<li>Java</li>
<li>Python</li>
</ul>
<ol>
<li>JavaScript</li>
<li>Ruby</li>
<li>PHP</li>
</ol>
입력
끝 탭이 필요하지 않습니다. input 요소를 통해 한 줄의 텍스트 입력을 받아들일 수 있습니다.
textarea 요소를 통해 여러 줄 텍스트 입력을 받을 수 있습니다
index.html
<p>input要素</p>
<input>
<p>textarea要素</p>
<textarea></textarea>
보내기 단추
input 요소에서 type 속성을 지정하고 type 속성에서submit을 지정하면 발송 단추를 보냅니다 (다른 것도 추가 기재됩니다)
value 속성에서 단추에 표시할 텍스트를 지정할 수 있습니다.지정하지 않은 경우 자동으로 발송이 됩니다.
index.html
<input type="submit> <!-- 「送信」ボタン -->
<input type="submit value="保存"> <!-- 「保存」ボタン -->
CSS
HTML과 다른 파일에 기술합니다.
HTML의 각 요소에 대해 상세한 레이아웃을 할 수 있습니다.
이때 대상의 요소를'선택기', 변경 항목을'속성'이라고 부른다.
문자 색상 변경하기
16진수 컬러 코드로 색상을 지정합니다.주요 색상은 직접 이름으로 지정할 수 있습니다.
index.html<h1>赤です</h1>
<p>青です</p>
stylesheet.cssh1 {
color: red;
}
p{
color: #0000ff;
}
결과 내보내기
빨간색이에요.
블루
메모
stylesheet.css/*コメントだよ*/
문자 크기
font-size 속성 사용
픽셀 단위
index.html<h1>Hello</p>
<p>Hello</p>
stylesheet.cssh1 {
font-size: 10px;
}
p {
font-size: 40px;
}
문자 글꼴
font-family 속성 사용
글꼴 이름에 공백이 있으면 ""을 사용하여 글꼴 이름을 둘러쌉니다.
stylesheet.cssh1 {
font-family: YuMincho;
}
p {
font-family: "Lucida Grande";
}
문자 배경색
background 색상 속성 사용하기
16진수 컬러 코드로 색상을 지정합니다.주요 색상은 직접 이름으로 지정할 수 있습니다.
stylesheet.cssh1 {
background-color: red;
}
p {
background-color: #0000ff;
}
요소의 너비/높이
폭:width 속성, 높이:height 속성 사용
픽셀 단위
stylesheet.cssh1 {
width: 500px;
height: 80px;
}
img {
width: 500px;
height: 200px;
}
태그 이름
예를 들어 리 요소의 색을 그대로 바꾸면 모든 옵션의 색이 바뀐다.
class를 사용하여 요소 이름 지정
index.html<ul>
<li class="redtext">HTML</li>
<li class="redtext">CSS</li>
<li>JavaScript</li>
</ul>
stylesheet.css.redtext { /*class名の前にドット(.)を忘れずに！*/
color: red;
}
결과 내보내기
<h1>赤です</h1>
<p>青です</p>
h1 {
color: red;
}
p{
color: #0000ff;
}
블루
메모
stylesheet.css
/*コメントだよ*/
문자 크기
font-size 속성 사용
픽셀 단위
index.html
<h1>Hello</p>
<p>Hello</p>
h1 {
font-size: 10px;
}
p {
font-size: 40px;
}
문자 글꼴
font-family 속성 사용
글꼴 이름에 공백이 있으면 ""을 사용하여 글꼴 이름을 둘러쌉니다.
stylesheet.css
h1 {
font-family: YuMincho;
}
p {
font-family: "Lucida Grande";
}
문자 배경색
background 색상 속성 사용하기
16진수 컬러 코드로 색상을 지정합니다.주요 색상은 직접 이름으로 지정할 수 있습니다.
stylesheet.css
h1 {
background-color: red;
}
p {
background-color: #0000ff;
}
요소의 너비/높이
폭:width 속성, 높이:height 속성 사용
픽셀 단위
stylesheet.css
h1 {
width: 500px;
height: 80px;
}
img {
width: 500px;
height: 200px;
}
태그 이름
예를 들어 리 요소의 색을 그대로 바꾸면 모든 옵션의 색이 바뀐다.
class를 사용하여 요소 이름 지정
index.html
<ul>
<li class="redtext">HTML</li>
<li class="redtext">CSS</li>
<li>JavaScript</li>
</ul>
.redtext { /*class名の前にドット(.)を忘れずに！*/
color: red;
}
목록 정렬
flat 속성을 사용하여 지정한 요소를 가로로 배열할 수 있습니다
index.html
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
li {
float: left; /*左から順に横並び*/
float: right; /*右から順に横並び*/
}
요소 경계
padding: 값 px;안쪽의 위아래 좌우에 공백 추가
위로만 하면paddingtop:,아래로는padding-bottom,왼쪽은padding-left,오른쪽은padding-right입니다.생략형도 있다.
margin: 값 px;변경합니다.
stylesheet.css
p {
padding: 20px; /*上下左右*/
padding: 20px 10px 20px 10px; /*左から top,right,bottom,leftの順に余白設定*/
padding: 20px 10px; /*左から top+bottom,right+leftの順に余白設定*/
margin: 20px;
}
테두리(테두리)
굵기 px 종류 색상;가운데, 위쪽 및 아래쪽 선 추가
각 방향과 페이지의 간격이 같은 설명 방법을 지정하다
stylesheet.css
p {
border: 5px solid red; /*赤枠の線で囲まれる*/
border-bottom: 1px solid #333; /*下部に枠線*/
}
상자형
공백과 경계의 관계
이미지 종속http://creator.aainc.co.jp/archives/5952
웹 페이지 레이아웃
요소를 그룹화하여 레이아웃을 개별적으로 지정할 수 있습니다.
예를 들어 헤더,main,footer 세 가지 레이아웃으로 나누어 보세요.
index.html
<div class="header">
</div>
<div class="main">
</div>
<div class="footer">
</div>
문서의 일부에 CSS 적용
span 태그로 둘러싸여 섹션을 지정하고 CSS를 적용할 수 있습니다.
index.html
<p>ここは<span>Qiita</span>です</p>
span {
color: red;
}
여기는 큐타.
주의점
Reference
이 문제에 관하여(HTML CSS의 자기 노트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/daivr7774/items/fb930adec528eefe6395텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
