본문 바로가기

HTML

 (107)
[HTML] section과 aside 부분 가운데 내용 부분에 들어갈 곳을 article 태그로 정의 한다 그 중에 넓은 부분을 section, 좁은 부븐을 aside로 지정해본다. (앞에서 했던 내용에 추가한다.) Joandora 가장 제주다운 수산리집 이용 안내 객실 소개 예약 방법 예약 하기 요안드라 소개 - 요안드라는 게스트 하우스(Guest house) 형식의 농어촌 민박입니다. 성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 밖에 나가 앉아 있는 시간이 많아질듯 합니다. 오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 닮았습니다. 내일은 두달 여 동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 ..
[HTML] header부분 header부분은 주로 웹 페이지 상단에 메뉴 부분과 브랜드 로고 부분을 작성한다. Joandora 가장 제주다운 수산리집 이용 안내 객실 소개 예약 방법 예약 하기 @charset "utf-8"; body { font: 14px "맑은 고딕"; /* font-size: 14px; font-family: "맑은 고딕"; */ } .container { position: absolute; width: 960px; margin: 0 auto; background-color: white; border: 1px solid #e7e7e7; } header { position: relative; height: 280px; background-image: url('../images/bg.png'); backgroun..
[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-..

티스토리툴바