본문 바로가기

LEARN/HTML | CSS39

[HTML] tag 태그 💾 Editor: VSCode 📢 HTML Hyper Text Markup Language 웹페이지 만들 때 사용 자료들이 어떻게 생겼나 구조를 표현하기 위한 언어 👉 index.html 생성 안녕하세요 body tag 안에 텍스트를 넣는다. 🔎 TAG 글을 적을 때는 tag 안에 적음 p(paragraph) h(heading) 실습 시작 안녕 버튼 링크 1 2 👉 정리 웹페이지를 만들 때 모든 요소는 태그 안에 넣음 일부 태그는 속성 기입 가능함 태그 안에 태그도 가능함 👉 실습 :: 글자 일부 클릭하면 웹페이지 이동 글자를 클릭하면 네이버를 새창으로 이동합니다. target 속성을 이용해 새창으로 이동하게 했다. 코딩애플 공부 기록 2022. 12. 25.
[부스트코스] 8 미디어 쿼리 8. 미디어쿼리 1)미디어쿼리 소개 반응형 웹 사이트 제작에 반드시 필요한 기술 각 미디어 매체(screen, print)에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것 2) 미디어 타입 & 미디어 특성 @media(at media) 미디어 타입(Media Types) 미디어 특성(Media Features) @media mediaqueries { ... } /* 미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나오는 스타일 규칙이 적용되고, 거짓이면 무시됨 */ Media Types (미디어 타입) all, braille, embossed, handheld, print, projection, screen, speech, tty, tv all, print, screen 을 현업에서 많이 사용하.. 2022. 3. 22.
[부스트코스] 7 CSS 레이아웃 7. 레이아웃 1) 속성-display DISPLAY display: none; display: inline; display: block; display: inline-block; display: list-item; display: flex; display: inline-flex; display: table; display: table-cell; box box box inline-box는 배치는 인라인처럼 되고, 속성은 box 속성 2) 속성-visibility 요소를 어떻게 숨길 것인지 결정 visibility: visible|hidden|collapse|initial|inherit; visibility: visible; /* 보임 기본값 */ visibility: hidden; /* 숨김, 자신의 박.. 2022. 3. 21.
[부스트코스] 6-2 CSS 폰트, 텍스트 6. 폰트, 텍스트 8) 속성-font font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; /* size | family */ font: 2em "돋움", dotum, sans-serif; /* style | size | family */ font: oblique 2em "돋움", dotum, sans-serif; /* style | variant | weight | size/line-height | family */ font: oblique small-caps bold 16px/1.5 '돋움'.. 2022. 3. 20.
[부스트코스] 6-1 CSS 폰트, 텍스트 6. 폰트, 텍스트 1) 속성-typography em: 폰트 전체 높이 ex(=x-height): 해당 폰트의 영문 소문자 x의 높이 Baseline: 소문자 x를 기준으로 하단의 라인을 의미 Descender: 소문자에서 baseline 아래로 쳐지는 영역을 의미 (g, j, p, q, y) Ascender: 소문자 x의 상단 라인 위로 넘어가는 영역 (b, d, h, l) 2) 속성-font-family (글꼴) font-family: family-name|generic-family|initial|ingerit; /* 맨 마지막 선언은 generic-family */ font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif; fami.. 2022. 3. 19.
[부스트코스] 5-2 CSS 단위, 배경, 박스모델 5. 단위, 배경, 박스모델 6) 속성-border 요소의 테두리 /* 속성 */ border-width: 1px; /* 두께 | thin | medium | thick */ border-style: solid; /* 종류 none | hidden | dotted | dashed | solid | double | groove */ border-color: #000; /* 색상 */ /* 축약형 */ border: 1px solid #000; /* 단축 속성 */ border-left: 6px solid red; /* 보더 왼쪽 */ border-width: 6px; /* 보더 두꼐 */ border-width: 6px 3px; /* 보더 상하, 좌우 두께 */ border-width: 6px 3px 4p.. 2022. 3. 18.