HTML5 HTML, padding, border, margin 웹 페이지를 박스처럼 관리하는 방법을 알아보겠다. 태그를 사용하여 내용물을 작성을 하면 그 내용물을 기준으로 내용물을 content, 내용물을 둘러싸는 경계선(border)이 있고 경계선과 내용물 사이에 안쪽 여백을 padding 마지막으로 경계선 바깥쪽 여백을 margin이 존재하는 구조로 생각하면 된다. 구별하기 쉽게 border에 색깔을 넣어 2개의 박스 형태처럼 만들어 보았다. firstbox secondbox h1 { border: 5px solid blue; } margin, padding에 아무런 효과를 넣지 않았기 때문에 경계선에 붙어있는 모습이다. padding의 효과를 알아보기 위해 2개의 box에 50px만큼 효과를 넣어 보겠다. h1 { border: 5px solid blue; p.. 2023. 10. 19. HTML 태그 이름 붙이기, class, div 태그 HTML의 내용을 CSS로 디자인을 할 때 여러 요소들이 같은 태그를 사용하면 태그가 같기 때문에 각각 요소들을 따로 디자인을 할 수 없게 된다. 이러한 경우에는 원하는 요소에 태그에 이름을 붙이고 그 이름을 사용하여 CSS파일에서 각각 원하는 디자인을 요소마다 할 수가 있게 된다. 태그에 class를 입력한다. hello hello hello 3개의 p태그 중에 첫 번째 p태그에는 design1이라는 이름으로 class를 입력하였다. class이름을 CSS에 적을 때는 [.클래스이름] 형태로 적는다(※주의 : 마침표와 클래스이름사이에 띄어쓰기를 하면 안 된다.) .design1 { color: red; } p{ color: blue; } p태그에는 글자색을 파란색으로 하고 design1 클래스에는 글자.. 2023. 10. 19. CSS, 속성, 속성 값, 색 표현 HTML은 웹페이지의 내용을 작성을 하는 역할이라면 CSS는 작성된 내용을 디자인하는 역할이다. CSS구조는 기본 골격은 [속성: 속성값;] 형태이다. HTML파일안에 CSS코드를 적어서 디자인을 할 수 있지만 그렇게 하면 코드가 너무 길고 가독성이 안 좋아지기 때문에 CSS파일을 따로 만들어서 HTML파일에 연결을 시킨다. HTML파일과 CSS파일 연결 : head태그안에 위의 코드를 입력하여 CSS와 HTML을 연동시킨다. href에는 CSS파일이름을 적어준다. CSS 사용하기 CSS는 디자인할 HTML 태그를 입력하고 중괄호 그리고 속성, 속성값을 입력하면 된다. hello hello hello h1 { color: red; } h2{ font-size: 100px; } p{ color: blue;.. 2023. 10. 19. HTML의 head와 body hello hello> hello head태그의 요소들 : 한글을 깨지지 않게 출력하려면 한글을 인식하는 인코딩 방식을 지원 html 연습장 : title태그는 웹페이지 맨 위 상단에 제목을 나타낸다. body태그의 요소들 hello : h태그는 headline으로 보통 문단의 주제 등 큰 글씨를 나타낼 때 사용한다. h태그는 숫자와 함께 사용하며 숫자가 클수록 글씨가 커진다. hello : p태그는 paragraph로 문단에 글을 적는 것처럼 보통 내용을 적을 때 사용한다. 출력 화면 2023. 10. 19. 이전 1 2 다음
