본문 바로가기

기초/HTML l& CSS13

<13> HTML & CSS [속성 - 박스모델] width: 요소의 가로 너비를 지정 값: auto - 브라우저의 너비를 계산(기본값: auto, 블록요소: 100%, 인라인요소: 가로세로넓이x 글자특화) 단위 - px, em, cm등 단위로 지정 height: 요소의 세로 너비를 지정 값: auto - 브라우저의 너비를 계산(기본값: auto, 블록요소: 0, 인라인요소: 가로세로넓이x 글자특화) 단위 - px, em, cm등 단위로 지정 max-width, min-width: 요소의 최대 가로 너비를 지정, 요소의 최소 가로 너비를 지정 값: auto - 브라우저의 너비를 계산 단위 - px, em, %등 단위로 지정(기본값: none(없다)) 값: auto - 브라우저의 너비를 계산 단위 - px, em, %등 단위로 지정(.. 2022. 8. 17.
<12> HTML & CSS [css 단위] 1. px: 해상도에 따른 상대단위, 고정하는데 사용하는 픽셀 단위(가장 많이 사용) 2. %: 상대적으로 부모요소의 사이즈 영향을 받음 3. em: 자기 자신의 폰트 사이즈에 대해 영향을 받음 즉 font-size가 10px이면 600px = 60em 4. rem: HTML에 지정된 폰트 사이즈의 영향만을 받음 5. vw: 화면에 출력하는 화면전체를 뷰포트(Viewport)라고 하는데 뷰포트의 비율로 가로넓이 6. vh: 뷰포트의 비율로 세로넓이 7. vmin: 뷰포트의 최소넓이 즉 가로와 세로를 생각했을때 더 짧은 쪽에 비율로 넓이가 됨 8. vmax: 뷰포트의 최대넓이 2022. 8. 17.
<11> HTML & CSS [문법] 선택자 { ex) div { 속성: 속성값; color: red; /* 여기는 주석부분입니다 */ } } 선택자의 역할: 속성과 값을 지정할 대상을 검색 속성과 값의 역할: 검색된 대상에 지정될 CSS 명령 /* Comment */: 문서 내 수정사항이나 설명 등을 작성(주석) [선언방식] 인라인 방식: HTML 요소(태그)의 'style' 속성에 직접 작성하는 방식 ex) HELLO 내장방식: HTML 안에 작성하는 방식 ex) HELLO 링크방식: HTML를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식(추천방식) 병렬방식 호출 ex)HTML: HELLO ------------------------------------------------------------------ CSS(com.. 2022. 8. 8.
<10> HTML & CSS [CSS Reset] - CSS 초기화 - 브라우저가 제공하는 스타일이 표준화 되어있지 않기 때문에 브라우저 마다 모양이 달라 초기화 하여 사용 reset.css.cdn 검색 → reset-css CDN by jsDeliver 선택 → Copy to Clipboard클릭 → Copy HTML → 쓰는 코드 style 맨위에 삽입 [Codepen] 간이 코딩장소 - 개발환경을 세팅할 필요가 없음 - HTML은 로 감싸진 형태로 시작하기 때문에 body 태그로 감싸져있다고 가정한후 코딩 시작 - CSS는 설정을 통해 Reset상태 즉 초기화 상태에서 시작 가능 [Emmet] 태그를 좀더 빠르고 쉽게 쓰기위한 문법 ex) div를 쓰고 tab을 누르면 자동으로 가 써짐 2022. 8. 5.
<9> HTML & CSS [전역 속성] 모든 HTML 요소에서 공통적으로 사용 가능한 속성 class: 공백으로 구분된 요소의 별칭을 지정, CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근(중복 사용가능) id: 문서에서 고유한 식별자(idenifier, ID)를 정의, CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근(고유한 요소여야 함) style: 요소에 적용할 CSS를 선언 title: 요소의 정보(설명)을 지정 lang: 요소의 언어(ISO 639-1)를 지정 data-*.. 2022. 8. 3.
<8> HTML & CSS [표 콘텐츠] , , , : 데이터 표()의 행(줄 / )과 열(칸, 셀(Cell) / , )을 생성 → Table Row, Table Header, Table Data : '머리글 칸'을 지정 속성 abbr: 열에 대한 간단한 설명 headers: 관련된 하나 이상의 다른 머리글 칸 id 속성 값 colspan: 확장하려는(병합) 열의 수(기본값: 1) rowspan: 확장하려는(병합) 행의 수(기본값: 1) scope: 자신이 누구의 ‘머리글 칸’인지 명시 값: col(자신의 열), colgroup(모든 열), row(자신의 행), rowgroup(모든 행), auto(기본값) : '일반 칸'을 지정 속성 headers: 관련된 하나 이상의 다른 머리글 칸 id 속성 값 colspan: 확장하려는(병.. 2022. 8. 3.
<7> HTML & CSS [멀티미디어] : 이미지를 삽입 속성 - src: 이미지 URL(필수) 값: URL - alt: 이미지의 대체텍스트(필수) - width: 이미지의 가로 너비 - height: 이미지의 세로 너비 - srcset: 브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의(반응형 웹사이트를 만들때 활용) 값: w(이미지의 원본 크기 가로너비), x(이미지의 비율 의도, ex.1을 기준으로 몇배인지) - sizes: 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의(반응형 웹사이트를 만들때 활용) : 소리 콘텐츠(MP3)를 삽입, autoplay가 지정된 경우, preload는 무시됨 속성 - autoplay: 준비되면 바로 재생 값: 불린(Boolean) - controls: 제어 메뉴를.. 2022. 7. 22.
<6> HTML & CSS [인라인텍스트] : 다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정 속성 - download: 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미 값: 불린(Boolean) - href: 링크 URL 값: URL - rel: 현재 문서와 링크 URL의 관계(Link Types) 값: license, prev, next .... - target: 링크 URL의 표시(브라우저 탭) 위치 값: _self(현재 페이지, 기본값), _blank(새 페이지) - type: 링크 URL의 MIME 타입 값: text/html .... → a태그가 인라인 요소이기 때문에 block요소로 모양을 넣어야 함 : 약어를 지정(Abbrev.. 2022. 7. 19.
<5> HTML & CSS [콘텐츠 구분] 예전에는 만 가지고 만들 수 있었기 때문에 태그에 의미를 두지 않았지만 html5로 넘어오면서 의미를 갖는 태그가 많이 생김. 그래서 분명한 의미를 가지고 있는 태그에 의미에 맞게 적재적소에 쓰이는 것이 중요 : 문서의 헤더를 설정(보통 로고, 제목, 검색 등을 포함) : 문서의 푸터를 설정(보통 작성자, 저작권, 관련 문서 등을 포함) , 는 후손이 될 수 없음 : 문서의 주요 콘텐츠를 설정 IE 지원 불가, 한 문서에 하나의 요소만 포함 가능 : 독립적으로 구분되거나 재사용 가능한 영역을 설정(매거진/신문 기사, 블로그 등) 일반적으로 ~를 포함하여 식별, 작성일자와 시간을 의 datetime 속성으로 작성 → ~는 전역 속성만 포함하며 문서의 목차를 만드는 것처럼 사용자 에이전에 사.. 2022. 7. 14.

티스토리툴바