본문 바로가기

HTML/CSS 기초

 (9)
[CSS] position 알아보기 : static, relative, absolute position으로 해당 구역에 위치를 지정할 수 있다. static은 해당 구역 왼쪽 상단을 기준으로 차례대로 표현된다. 따로 위치지정을 할 수 없다. 1. static 2. static 3. static relative는 자신보다 먼저 선언된 위치 끝 부분을 기준으로 위치된다. 1. static 2. relative 3. relative absoulte는 다른 구역과 상관없이 부모 구역 왼쪽 상단을 기준으로 배치됩니다. 1. static 2. absolute 3. absolute
[CSS] 실습 여태까지 배운 것을 통해 실습을 진행해보자. 각각의 구역을 로 나눠서 진행하였고, 인라인 스타일을 이용하여 작성하였다. 확인하세요 주문 및 배송 오후 2시 이전 주문건은 당일 발송합니다 2시 이후 주문건은 다음날 발송합니다(주말 제외) 교환 및 환불 불만족시 100% 환불해 드립니다 고객센터로 전화주세요 고객센터 0000-0000 상담시간 : 오전 9시 ~오후 6시 (토/일, 공휴일 휴무)
[CSS] border와 outline border와 outline은 둘 다 바깥 테두리를 의미하지만 독립적으로 움직인다. 아웃 라인이 조금 더 바깥 부분을 의미힌다. 테두리와 아웃라인 스타일 높이 100px, 너비 300px 크기의 블록에 빨간색 직선 테두리와 파란 점선 아웃라인 효과를 준 스타일이다. 높이 100px, 너비 300px 크기의 블록에 파란색 점선 테두리와 둥근 모서리 효과를 준 스타일이다.
[CSS] margin 설정하기 margin과 padding을 설정해보자. margin은 컨텐츠 간의 간격을 이야기하고 padding은 컨첸츠 안에 있는 내용과 컨텐츠 테두리의 간격을 이야기한다. 여백과 위치 1 여백과 위치 2
[CSS] 문단마다 스타일 설정하기 문단마다 여러가지 스타일을 지정해 줄 수 있다. 1. 문장의 밑줄 효과(Underline) 2. 문장의 취소선 효과(line-through) 3. 링크 위에 마우스를 올리면 밑줄이 나타난다. 4. 텍스트의 그림자 효과 효과들을 알아보자. 문단 스타일 설정 CSS의 문장과 문단 스타일 문장의 밑줄 효과(Underline) 문장의 취소선 효과(line-through) 다음으로 이동. 링크 위에 마우스를 올리면 밑줄이 나타난다. 텍스트의 그림자 효과1 텍스트의 그림자 효과2 텍스트의 그림자 효과3 @charset "utf-8"; h1 { text-align: center; text-indent: 50px; } #text1 { text-transform: capitalize; } #text2 { text-dec..
[CSS] 글자 스타일 글자스타일과 div 스타일을 css를 이용하여 지정할 수 있다. 그리고 id로 불러오려면 #태그를 이용하고 class로 불러오려면 .태그를 이용한다. 글자 관련 스타일 글자 관련 스타일 속성을 이용하여 글꼴, 글자 크기, 모양, 색, 표현 범위 지정 등을 설정한다. 그리고, 글자 간격, 굵기, 줄 간격을 설정할 수 있다. @charset "utf-8"; body { text-align: center; } #title { font-size: 28px; color: rgba(124,43,2, 0.7); } .contents { font-family: "궁서", Arial, Helvetica, sans-serif; width: 200px; height: 100px; margin: 30px auto; line-..
[CSS] prefix HTML을 적용하기 위해서는 웹브라우저마다 따로 정의를 해줘야한다. 하지만 prefix라는 자바스크립트를 이용하여 자동으로 적용해줄 수 있다. Mouse Over
[CSS] 외부 스타일 외부 파일에 스타일을 지정해서 사용할 수 있다. 사용하는 방법은 head 쪽에 을 적어주면 된다. 외부 스타일 HTML 문서 외부에 스타일 시트(*.css)을 작성해 두고 여러 웹 페이지에서 해당 스타일이 필요한 경우 스타일을 참조하는 방식 HTML 파일을 열어 태그의 내부에 style.css 파일을 연결하는 코드를 태그로 추가한다. 스타일을 사용하는 방법 인라인 스타일 임베디드 스타일 외부파일 스타일 h1 { color: blue; } p { font-size: 16px; color: brown; margin-bottom: 15px; } #p1 { color: green; } label { color: burlywood; font-weight: bold; font-size: 2..

티스토리툴바