만들면서 알아가는 HTML/CSS
간략한 자기소개를 심플한 포트폴리오로 만들어보면서 HTML 태그로 구조를 만드는 방법에 관한
커리큘럼을 따라해 보았다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>심플포트폴리오</title>
<link href="css/reset.css" rel="stylesheet"
type="text/css" />
<link href="css/style.css" rel="stylesheet"
type="text/css" />
<script src="js/jquery.1.12.4.js"
type="text/javascript"></script>
<script
src="plugins/bxslider/js/jquery.bxslider.js"
type="text/javascript"></script>
<link href="plugins/web-fonts-with-css/css/all.css" rel="stylesheet"
type="text/css" />
<script>
$(document).ready(function(){
$('.slider').bxSlider({
controls:false,
pager:false,
auto:true
});
});
</script>
</head>
<body>
<div class="overlay"></div>
<div class="slider">
<div class="background__01"></div>
<div class="background__02"></div>
<div class="background__03"></div>
</div>
<div class="contents">
<p class="contents__name">Lucky Alice</p>
<p class="contents__job">I'm Backend Developer & Web Designer</p>
<div class="contents__SNS">
<ul class="contents__list">
<li>
<a href="#">
<i class="fas fa-brands fa-facebook-f">face</i>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-twitter">twi</i>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-instagram">insta</i>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-blogger-b">blog</i>
</a>
</li>
</ul>
</div>
</div>
</body>
</html><!DOCTYPE html> :
모든 HTML 문서는 <!DOCTYPE html> 선언으로 시작한다
선언은 HTML 태그가 아니다.
이것은 브라우저에서 (예상되는) 문서 유형에 관한 ‘정보’다.
<html> :
<html> 태그는 HTML 문서의 루트를 나타낸다.
<head> :
<head> 요소는 메타데이터(데이터에 대한 데이터)의 컨테이너다.
<html> 태그와 <body> 태그 사이에 배치된다.
메타데이터는 HTML 문서에 대한 데이터이며, 표시되지는 않는다.
메타데이터는 일반적으로 문서 제목, 문자 집합, 스타일, 스크립트 및 기타 메타정보를 정의한다
<meta charset="UTF-8">
HTML Character Sets = HTML 문자 집합:
모든 현대 컴퓨터 언어는 UTF-8 문자 집합을 기본값으로 사용한다
<meta> :
<meta> 태그는 HTML 문서에 대한 메타데이터를 정의한다.
메타데이터는 데이터에 대한 데이터(정보)입니다.
<meta> 태그는 항상 <헤드> 요소 안에 들어간다
<title> :
<title> 태그는 문서의 제목을 정의합니다.
제목은 텍스트 전용이어야 하며, 브라우저의 제목 표시줄이나 페이지 탭에 표시됩니다.
검색엔진 최적화(SEO)를 위해서는 페이지 제목의 내용이 매우 중요하다
페이지 제목은 검색 결과에 페이지를 나열할 때 검색 엔진 알고리즘에서 순서를 결정하는 데 사용된다.
<link> :
<link> 태그는 현재 문서와 외부 자원 간의 관계를 정의한다.
<link> 태그는 외부 스타일 시트에 링크하거나 웹 사이트에 즐겨찾기 아이콘을 추가하는 데 가장 많이 사용된다.
<link> 요소는 빈 요소이며 특성만 포함한다.
-> href => URL : 연결된 문서의 위치를 지정한다
-> rel => ‘icon / license / next / preload / prev / search / stylesheet’ etc :
현재 문서와 연결된 문서 간의 관계를 지정합니다
-> type => media_type : 연결된 문서의 미디어 유형을 지정한다
<script> :
<script> 태그는 클라이언트 측 스크립트(JavaScript)를 내장하는 데 사용된다.
<script> 요소는 스크립팅 문을 포함하거나 src 특성을 통해 외부 스크립트 파일을 가리킨다..
-> src => URL : 외부 스크립트 파일의 URL을 지정한다.
-> type => scripttype : 스크립트의 미디어 유형을 지정한다
<body> :
<body> 태그는 문서 본문을 정의한다.
<body> 요소는 제목, 문단, 이미지, 하이퍼링크, 표, 목록 등 HTML 문서의 모든 내용을 포함한다.
참고: HTML 문서에는 <body> 요소가 하나만 있을 수 있다.
<div> :
<div> 태그는 HTML 문서에서 분할 또는 섹션을 정의한다.
<div> 태그는 HTML 요소의 컨테이너로 사용되며 CSS로 스타일링 되거나 자바스크립트로 조작된다.
<div> 태그는 class 또는 id 속성을 사용하여 쉽게 스타일링할 수 있다.
<div> 태그 안에는 어떤 종류의 콘텐츠라도 넣을 수 있다!
-> class 속성 : 요소에 대한 하나 이상의 클래스 이름을 지정한다(스타일 시트의 클래스를 나타냄)
<p> :
<p> 태그는 단락을 정의한다.
브라우저는 각 <p> 요소 앞과 뒤에 빈 줄 하나를 자동으로 추가한다.
-> class 속성 : 요소에 대한 하나 이상의 클래스 이름을 지정한다(스타일 시트의 클래스를 나타냄)
<ul> :
<ul> 태그는 순서가 없는(괄호가 없는) 목록을 정의한다.
<ul> 태그를 <li> 태그와 함께 사용하여 순서 없는 목록을 만든다.
팁: 순서 목록은 <ol> 태그를 사용한다.
-> class 속성 : 요소에 대한 하나 이상의 클래스 이름을 지정한다(스타일 시트의 클래스를 나타냄)
<li> : <li> 태그는 목록 항목을 정의한다.
<li> 태그는 순서 목록 <ol> 태그와 순서 없는 목록 <ul> 태그 등에 사용된다.
-> class 속성 : 요소에 대한 하나 이상의 클래스 이름을 지정한다(스타일 시트의 클래스를 나타냄)
<a> :
<a> 태그는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼링크를 정의한다.
<a> 요소의 가장 중요한 속성은 링크의 대상을 나타내는 href 속성이다
-> href => URL : 링크가 이동하는 페이지의 URL을 지정한다
<i> :
<i> 태그는 텍스트의 일부를 대체 음성이나 무드로 정의한다.
또한 전문용어, 다른 언어의 문구, 사상, 선박 이름 등을 나타내는 데 자주 사용된다.
-> class 속성 : 요소에 대한 하나 이상의 클래스 이름을 지정한다(스타일 시트의 클래스를 나타냄)
jQuery ready() Method :
The ready() method specifies what happens when a ready event occurs.
ready() 메서드는 준비 이벤트가 발생할 때 수행할 작업을 지정
=> Syntax [구문]
1). $(document). ready(function)
-ready() 메서드는 현재 문서에서만 사용할 수 있으므로 셀렉터가 필요하지 않다.
2). $(function)
- 문서가 로드된 후 실행할 함수를 지정한다. [Required]
html, body{
width: 100%;
height: 100%;
}
.bx-wrapper, .bx-viewport, .slider{
width: 100%;
height: 100%;
}
.background__01{
width: 100%;
height: 100%;
background: url("../images/a.jpg") no-repeat;
background-size: cover;
background-position: center;
}
.background__02{
width: 100%;
height: 100%;
background: url("../images/b.jpg") no-repeat;
background-size: cover;
background-position: center;
}
.background__03{
width: 100%;
height: 100%;
background: url("../images/c.jpg") no-repeat;
background-size: cover;
background-position: center;
}
.overlay{
width: 100%;
height: 100%;
background: url("../images/16.png");
position: absolute;
top:0;
z-index: 10;
}
.contents{
position: absolute;
top:0%;
z-index: 20;
text-align: center;
}
.contents__name{
font-size: 64px;
font-weight: bold;
color: white;
margin-bottom: 25px;
}
.contents__job{
font-size: 25px;
font-weight: bold;
color: white;
margin-bottom: 50px;
}
.contents__list{
font-size: 0;
}
.contents__list > li{
display: inline-block;
width: 52px;
height: 52px;
border: 1px solid white;
border-radius: 50%;
font-size: 16px;
}CSS background properties :
- background-color
- background-image
- background-repeat
- background-attachment [부착, 부착물, 첨부]
- background-position
- background (shorthand property)
- background-size
The position Property :
-위치 특성은 요소에 사용되는 위치 지정 방법의 유형을 지정한다.
There are five different position values :
- static [정적인] - 상단/하단/좌우 속성에 영향받지 않음
- relative [상대적인] - 상하/좌우 속성을 설정하면 해당요소가 정상 위치에서 벗어나 조정된다.
- fixed [고정된]
- absolute [절대적인]
- sticky [(컴퓨터 웹사이트가) 관심을 끄는, 흡입력 있는]
- -> position 속성 => 요소에 대한 위치의 유형을 지정함
top :
맨 위쪽 속성은 배치된 요소의 수직(세로) 위치에 영향을 미친다.
이 속성은 배치(위치) 하지 않은 요소에는 영향을 주지 않는다
Z-index property [속성] :
-요소의 스택순서를 지정한다. (다른 요소의 앞이나 뒤에 배치할 요소)
-요소가 배치되면 다른 요소와 겹칠 수 있다.
text-align :
텍스트 정렬 속성은 요소에서 텍스트의 수평 정렬을 지정한다
margin :
CSS 마진(여백/가장자리) 속성은 정의된 테두리 밖에 있는 요소 주위에 공간을 생성하는 데 사용된다.
->각 요소의 각 변에 대한 여백을 지정하는 속성 :
—> margin-top / margin-right / margin-bottom [밑/ 맨 아래] / margin-left
display property [속성] :
요소의 디스플레이 동작(렌더링 상자 유형)을 지정한다
-> inline [인라인의, 즉시처리, 직렬/일렬식의, 한 줄로 늘어선] :
—> 요소를 인라인 요소(예: <span>)로 표시한다
—> 높이 및 너비(가로) 속성은 영향을 주지 않는다
-> block :
—>요소를 블록 요소(<p>와 같이)로 표시한다
—> 새로운 라인에서 시작하고, 전체 폭(너비)을 차지한다.
->inline-block :
—> 요소 자체는 인라인 요소로 형식이 지정되지만, 높이 및 너비 값을 적용할 수 있다.
border :
border [경계/테두리] 속성을 사용하면 요소 테두리(경계)의 스타일, 너비 및 색상을 지정할 수 있다.
Rounded Borders :
border-radius [테두리-반지름]속성은 요소의 둥근 테두리를 추가하는데 사용된다
'IT 태그' 카테고리의 다른 글
| W3 토플형식 심리테스트 사이트 3_JavaScript (0) | 2023.11.16 |
|---|---|
| W3 토플형식 심리테스트 사이트 2_CSS (0) | 2023.11.16 |
| W3 토플형식 심리테스트 사이트 1_html (0) | 2023.11.16 |
댓글