본문 바로가기

HTML5

 (13)
21. 02. 05. 13장- CSS3와 애니메이션 transform transition animation 13-1. 변형 2차원변형, 3차원변형 translate scale rotate rotate3D skew -> perspective를 써서 좀 더 3d로 느껴지게 끔 함. 13-2. 변형과 관련된 추가속성 가나다라 가나다라 -> backface-visibility는 rotateY(90deg)이 넘어가면 hidden은 뒷면이 안 보임. 13-3. 트랜지션 박스1 박스2 박스3 transition.html 13-4. 애니메이션 성적표 -> animation-iteration-count: infinite하면 계속 반복함. -> animation-fill-mode: forwards; 마지막 프레임에서 멈춤. ( 자세한 건 www.w3schools.com/c..
21. 02. 04. 12장- 선택자, 가상클래스 선택자(Selector): css의 속성이 적용될 장소 태그, 아이디, 클래스, 전체, 복수, 자손(공백 한 칸) 연결선택자, 속성선택자, 가상클래스와 요소 12-1. 연결선택자 자손 상위요소 하위요소 {} 자식 상위요소 > 하위요소 {} 인접 요소1 + 요소2 {} 형제 요소1 ~ 요소2 {} 참고사항 예약방법 및 요금 세부 조항은 아래 내용 참고. 예약방법 직접통화 문자남기기 요금 1인: 40,000원 2인: 60,000원 3인: 80,000원 4인: 100,000원 12-2. 속성 선택자 [속성]: 속성이름 [속성="속성값"] [속성~="속성값"]: 특정 값을 포함하는 속성에 적용, 순수하게 단어만 가지고 구분 [속성|="속성값"]: 특정 값을 포함하는 속성에 적용, 하이픈을 기준으로 [속성*="속..
21. 02. 03. 10장- HTML5와 시맨틱 태그, 11장- HTML과 멀티미디어 10. HTML5와 시맨틱 태그 header nav section article aside footer address iframe 이 영상을 위해서는 HTML5를 지원하는 브라우저가 필요합니다. 밤하늘을 수놓는 불꽃 추가적 내용 추가적 내용 추가적 내용 추가적 내용 이 영상을 보려면 HTML5를 지원하는 브라우저를 사용하세요.
21. 02. 03. 09장 다단 편집, 표 스타일 float: 다른 콘텐츠와의 뉴스기사같은 배치 clear: float의 속성을 해제 poosition: absoulte, relative, fixed 위치를 통한 배치 (too, right, bottom, lest) z-index: 겹치는 태그에 대한 앞 뒤 우선순위 지정 visibilit:y 가시성 9-2. 다단 편집 column-width: 너비 column-count: 단의 갯수 column-gap: 단과 단 사이의 여백 column-rule: 구분선 로그인 대통령은 내우·외환·천재·지변 또는 중대한 재정·경제상의 위기에 있어서 국가의 안전보장 또는 공공의 안녕질서를 유지하기 위하여 긴급한 조치가 필요하고 국회의 집회를 기다릴 여유가 없을 때에 한하여 최소한으로 필요한 재정·경제상의 처분을 하거나 ..
21. 02. 02. 09장- CSS 포지셔닝 float clear -> 핵심속성 position visibility z-index border-collapse table-layout vertical-align 9-1. CSS 포지셔닝과 주요속성들 box-sizing: content-box > width값을 콘텐츠의 너비값으로 사용 border-box > padding + border값을 width로 합산 float - 박스를 좌측이나 우측으로 붙이고 아래 내용이 그 주변을 흐르게 하는 속성 - float한 박스에 width값을 주어야 함. clear:both - float한 박스들의 바로 아래 박스에게 주변을 흐르지 않고 원래대로 배치하도록 하는 속성. - 이 요소는 블록이어야 한다. ※ float를 해제하지 않으면 float된 박스를 감싸는 박스..
21. 02. 02. 08장- 레이아웃을 위한 스타일 width, height: 박스 모델의 너비와 높이 display: 화면에서 요소가 어떻게 보일지를 결정하는 속성 border: 테두리 margin: 외부 여백 padding: 내부 여백 border-radius: 모서리 둥글게 처리 아버지를 아버지라 부르지 못하고 어머니를 어머니라 부르지 못하고 동에번쩍 서에번쩍 -> 은 인라인 속성, 는 블록 속성. (블록 속성은 margin이 있음.) -> box2 width값이 %라서 창크기에 따라 출력화면이 가변적으로 바뀜. -> 요소의 크기값은 콘텐츠크기 + 패딩 + 테두리 ★★★ 8.1 CSS와 박스 모델 태그가 가지고 있는 배치 속성 display inline block 블록레벨요소: p div hn hr ul li > 크기 조절 가능 인라인레벨요소: sp..
21. 02. 01. 07장- 색상과 배경을 위한 스타일 7-1. 색상 표현 #RRGGBB #RGB #000000 ~ #ffffff 7-2. 배경과 관련된 속성 background-color: 배경 색 background-clip: 배경 적용범위 여기는 제목 부분입니다. 여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본..
21. 02. 01. 06장- 텍스트·문단·목록 관련 스타일, 6-2. 텍스트 관련 스타일 font-size: 절대 크기, 상대 크기(안 중요), 크기(일반적인 사용 방법) ->단위 em: 사용되는 폰트의 M의 너비 값을 1 ex: 사용된 폰트의 x의 높이 값을 1 px: 픽셀 pt: 포인트, 일반 문서에서 많이 사용. 1em = 16px = 12pt 백분율: 100% = 1em font-weight: 100~900, bold bolder lighter narmal normal: 기본값 400 bold: 700 font-variant font-style: normal, italic(폰트자체에서 지원), oblique(css 계산에 의해 기울임) 문단테스트 제목 테스트 가가가나나나다다다 글자 크기를 굵게 적용 ABCDE abcde ABCDE ABCDE ABCDE ab..

티스토리툴바