본문 바로가기

전체 글

(84)

[ex21~23] CSS(display, float) ex21 display - 요소의 출력 방식 1. none 2. inline 3. block 4. inline-block -블럭 태그의 display 기본값: block / 인라인 태그는 inline -서로 바꿀 수 있음. 인라인 block으로 바꾸면 width, height 지정 가능(inline에 지정하면 안먹힘) - inline-block > 인라인 태그처럼 출력 + 너비/높이 지정 가능 메뉴메뉴메뉴메뉴메뉴 블럭 태그 상자1 상자2 상자3 인라인 태그 링크1 링크2 링크3 화면 더보기

[ex18] CSS(Box) ex18 전체코드 게시판 번호 제목 이름 날짜 읽음 01 Lorem ipsum dolor sit amet. Lorem. 2023-04-01 01 02 Quod praesentium voluptates cum culpa! Atque? 2023-04-02 02 03 Delectus officiis facere quibusdam! Iste. Expedita. 2023-04-03 03 04 Illo magnam sit dolorem officiis? Laudantium. 2023-04-04 04 05 Ad minus qui officiis dicta. Eos! 2023-04-05 05 06 Neque accusamus nemo repellat ad? At! 2023-04-06 06 07 Repellat beat..

[ex15~17] CSS(box) ex15 CSS 박스 모델, Box Model - 모든 태그는 사각형으로 랜더링(출력) 된다. - 태그가 화면에 출력될 때 공통된 성질에 관련된 정책(모델) 1. border 2. width, height 3. padding 4. margin 1. 테두리, border - 모든 태그는 자신의 영역을 가진다. - 영역이 항상 사각형이다. > 테두리 - 테두리 > 표현O, 표현X #box1 { background-color: yellow; } #box2 { border-color: black; /* 선의 색상 */ border-width: 1px; /* 선의 두께 */ border-style: solid; /* 선의 종료(solid, dashed, dotted) */ } /* 아래처럼 줄여서 작성 가능 */..

[ex14] CSS(text) ex14 텍스트 크기 보편적으로 10pt ~ 11pt / 12px ~ 16px / em, rem HTML 수치 표현 1. 숫자 > px, 문자수, 셀병합크기 2. 숫자% CSS 수치 표현 - 수치 데이터는 반드시 단위 표기를 해야 한다.(단위 생략 불가능) - html과 달리 글꼴 크기에 제한 없음 1. pt > 포인트(글꼴), 절대값, 1/72인치 2. px > 픽셀(크기, 위치, 여백, 글꼴 등), 절대값 3. em > 기본 글꼴 크기를 기준으로 하는 상대 크기(%), 상대값. 알파벳 대문자 M의 높이를 100% 기준으로 하는 상대 크기. 상속을 받음 4. rem > em과 동일. 상속을 안받음 9. % > 백분율(크기, 여백, 위치, 정렬 등..). 상대값. 부모를 기준 ---------------..

[ex12~13] CSS(background) ex12 HTML/CSS - 케밥 표기법 많이 사용 - aaa-bbb-cc *** CSS의 대부분의 속성은 모든 태그에 적용이 가능하다!!! 배경 1. 배경색 - background-color 2. 배경 이미지 - background-image CSS 색상 표현법 1. Color name: red, yellow, blue.. 2. RGB color(HEX): #FF0055 3. RGB color(DEC): rgb(255,0,128) 4. RGBA color(DEC): rgba(255,255,255,1) a(alpha channel - 불투명도(0~1)) body { /* background-color: yellowgreen; */ /* background-color: rgb(128, 0, 0); */ /..

[ex11] CSS(Emmet) Emmet, Zen-Coding - CSS 선택자 문법을 사용해서, HTML/CSS 코드를 손쉽게 작성하는 기능 - 생산성 도구 - https://emmet.io div {} p a PCDATA img input div#box1 h1#title div.item a.link 문자열 img.cat div.one.two.three div#box1.box img#cat1.pic.animal div[title] {} div[title] div[title=상자] img[width] img[width height] img[width=200 height=150] img[src=cat.jpg alt=고양이 width=200 height=150] 상자 div{상자} 상자 div#box1.box[title=상자]{상자입니다..

[ex03~10] CSS (Selector) ex03 CSS 문법 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값;} 선택자 { 속성명: 값; 속성명: 값; 속성명: 값; } 1. 선택자: 문서내에서 원하는 태그를 검색 2. 속성: 서식의 종류 3. 값: 서식의 값 CSS 선택자, CSS Selector - HTML 문서내에서 서식을 적용하려는 대상 태그를 검색하는 도구 1. 전체 선택자 - 모든 태그를 선택한다. - 모든 태그에 동일한 서식을 적용할 때 사용 더보기 수업 일지 오늘은 HTML 수업을 합니다. HTML 수업이 끝나면 CSS 수업으로 넘어갑니다. 수업 내용 문단 태그 목록 태그 테이블 태그 이미지 태그 링크 태그 복습할 내용 테이블 셀 병합하기 이미지 사이즈 변경하기 내부 링크 생성하기 2. 태그 선택..

[ex01~02] CSS (Style Sheet) CSS, Cascading Style Sheet - HTML 서식을 담당하는 언어 - 독립 실행이 안된다. 반드시 HTML 코드가 있어서 CSS 실행이 가능하다. > 모든 ML의 디자인을 담당하는 언어 - CSS1, CSS2, CSS3(+HTML5) - HTML 서식 기능 > CSS 서식 기능(확장) + 생산성 목적이 없는 태그 > 가장 많이 사용!! 1. : 블럭태그 2. : 인라인태그 요구사항] "안녕하세요." x 5번 출력 추가사항] 글자색 > 파란색 수정사항] 글자색 > 빨간색 더보기 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 강아지 멍멍이 왈왈이 HTML 문서에 CSS를 적용하는 방법 - 코드 관리 - 코드 재사용..

이전 1 2 3 4 5 6 7 ··· 11 다음

티스토리툴바