이번주는 웹개발에 관련하여 내용을 정리하여 공부할 예정이다. 오늘은 첫 시작이며
HTML과 CSS를 중점적으로 해볼 예정이다.
(1) HTML
모든 웹사이트의 가장 기본적인 구성 요소로서 웹페이지의 구조를 정의하는 웹을 위한 마크업 언어이다.
(2) CSS
간단하게 CSS는 문장에 디자인을 입히고 싶을 때 사용하는 언어이다. HTML은 문장의 구조를 만드는 반면 CSS는 "그 문장을 어떻게 브라우저에 표시할지 지정하는 언어"로 생각 할 수 있다.
(3)Javascript
Javacript는 웹페이즤 생동감을 불어 넣기 위해 만들어진 스크립트 언어이다.
HTML의 구조 즉, 정적인 부분을 담당하였다면 Javacript는 동적인 부분을 관리하는 언어이다.
-
HTML의 사용
먼저 VS코드를 사용하여 HTML과 CSS, Javacript를 구현 할 수 있다. 따라서 위 언어를 구사하려면 vs코드를 설치하는 것을 추천한다. -
HTML,CSS 사용방법
VS코드에서 index.html을 만들고 HTML을 코드에 입력하다보면 자동완성 기능으로 HTML:5를 선택 할 수 있다. 이렇게하면 HTML의 기본적인 툴을 완성 할 수 있다.
이번엔 HTML에서 사용하는 태그들의 기능에 대해 알아 볼 수 있게 사진으로 설명하겠다.
다음으로는 HTML과 CSS에서 사용되는 함수들에 대해 설명하겠다.
구조를 보며 요소 확인하기 :
background-image: url(); #html에 이미지를 등록하는 코드
background-image: center;
background-size: cover;
href="#" class="nav-link px-2 text-secondary # secondary 부분은 색상을 의미하며 원할 때 자신이 원하는 색으로 변경 할 수 있다.
(ex).
.mytitle {
height: 250px; # 높이를 250으로 설정
color: white; # 글씨 색상 흰색
display: flex; # 가로 정렬로 변경
flex-direction: column; # 주축을 수직 방향으로 설정
align-items: center; # 상하좌우 중앙정렬
justify-content: center; # flex로 지정된 박스의 가운데에 item을 정렬
background-image: url('') # 이미지의 주소를 입력 받는다.
background-position: center; #백그라운드 이미지 위치를 가운데로 설정함
background-size: cover; #배경이미지의 가로, 세로 길이
모두 요소보다 크다는 조건하에 배경 이미지를 작게 조정한다.
}
.mytitle>button {
width: 150px; #가로의 길이를 150PX로 지정
height: 50px; #세로의 길이를 50PX로 지정
background-color: transparent; #백그라운드의 색을 투명색으로 변경한다.
color: white; #폰트(글자)의 색상을 하얀색으로 변경한다.
border: 1px solid white; #선의 두께, 모양, 색상을 설정한다.
border-radius: 5px; #모서리의 모양을 둥글게 만들 때 필요하다.
margin-top: 5px; #요소의 위쪽에 바깥 여백 영역을 설정한다.
padding: 20px; #요소의 안쪽 여백 영역을 설정한다.
}(4) 예제 소스코드
https://github.com/KIMHAKSAN/github-test/blob/main/index.html
(5) 출력결과
(6) 총평
기본적인 HTML과 CSS의 기능을 살펴보고 구현하는 방법에 대해 공부 할 수 있었다. HTML과 CSS는 디자인에 대해 거부감을 느끼지않고 학습량을 적절히 투자한다면 누구나 다 할 수 있을 것이다. 하지만 많은 복습이 필요하며 코드를 창의적으로 줄일 수 있거나 구조를 예쁘고 보기 좋게 할 수 있는 능력에 따라 웹의 품질이 달라질 것으로 보인다.
