이번에도 전에 이어서 html을 공부했는데 html의 특성상 웹으로 바로바로 보며 확인하고 공부하는 방법이다 보니 코드로써 설명하는 것이 많다는것 양해 바라며 시작하겠다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link rel="stylesheet" href="test.css" type="text/css">
<style type="text/css">
/* embadded style sheet */
/* 모든 선택자 */
*{
font-family: 맑은 고딕, 돋움;
font-size: 24px;
}
/* 태그 선택자 */
div{color: blue; font-weight: bold;}
/* id 선택자 */
#java{ background-color: yellow; }
/* 클래스 선택자 */
.web{color: tomato;}
</style>
</head>
<body>
<h3>간단한 css 예</h3>
<div>과목 - 프로그래밍</div>
<p id="java">자바</p>
<p style="font-size: 20px;">스프링</p>
<hr>
<div>과목 - 웹</div>
<p class ="web">HTML</p>
<p class ="web">CSS</p>
<p class ="web">javaScript</p>
<hr>
</body>
</html>link를 이용해 외부 css파일을 가져올 수 있으며 각종 선택자들을 만들어 각각의 항목을 원하는 규격으로 표현할 수 있다.
또한 div태그가 있는데 이는 대표적인 블록 태그로써 요소들을 묶어서 처리할 때 사용한다.
내용이 없는 경우 height속성이 없으면 아예 표시가 되지 않는다.
padding을 통해 여백도 설정할 수 있다.
패딩없음
모든안쪽여백:20px
위 10 오른 5 아래 11 왼 6
padding은 안쪽 여백이었는데 margin을 이용하면 바깥쪽 여백도 제어할 수 있다.
여기서 < >를 쓰면 자동으로 html이 적용되어 나오는걸 확인했는데 상당히 흥미롭다.
마진은 그리고 좌우만 적용되고 상하로는 적용되지 않는걸 기억하자
인라인 태그는 패딩은 적용되지만 위/아래 패딩은 다른 영역을 침범한다
예제
스프링
예제
Insert title here
span 태그
HTML
CSS
javascript
HTML
CSS
javascript
HTML CSS javascript
이렇게 인라인 블럭 요소더라도 display옵션을 통해 블럭으로 만들 수 있다. Insert title here
<h3>vertial-align</h3>
<!-- virtual_align css 속성
: inline,table-cell box에서 수직 정렬을 지정
:박스의 정렬 방식
: 박스안 에서의 텍스트 정렬 방식이 아님
: inline 태그에서만 사용가능 -->
<div>
<div style="background: yellow;width: 100px;height: 100px; display: inline-block;vertical-align: baseline; ">A</div>
<div style="background: blue;width: 100px;height: 100px; display: inline-block;vertical-align: baseline; ">B<br>B</div>
<div style="background: green;width: 100px;height: 100px; display: inline-block;vertical-align: baseline; ">C<br>C<br>C<br></div>
</div>
<hr>
<div>
<div style="background: yellow;width: 100px;height: 100px; display: inline-block;vertical-align: top; ">A</div>
<div style="background: blue;width: 100px;height: 100px; display: inline-block;vertical-align:top; ">B<br>B</div>
<div style="background: green;width: 100px;height: 100px; display: inline-block;vertical-align: top; ">C<br>C<br>C<br></div>
</div>메인 화면 입니다.
header
머릿글 태그, 소개 등을 지정
nav
외부 페이지로 연결하는 링크의 모음, 일반적인 메뉴
aside
사이드바 태그
main
해당 문서의 주 콘텐츠 정의
article
문서, 페이지 애플리케이션을 포함. 독립적으로 완성된 문서내용을 담고 있음
section
문서의 세션을 정의
div
여러 태그를 묶을떄 사용
부터 입니다.
이들을 이용해 이런 식으로 화면을 보여줄 수 있다는 것 백엔드 언어와 달리 눈에 직관적으로 보이는 것이 나름 흥미있게 느꼈다.
더 길어질까봐 이만 마치며 html도 결코 만만치 않다고 느꼇던 하루였던 것 같다. 이만!
흔한 주니어 개발자