본문 바로가기

모아보기129

CSS 폰트 스타일: font-size font-weight font-style font CSS 폰트 스타일: font-size font-weight font-style font 오늘은 글자 크기, 굵기, 스타일을 조절해보겠습니다. 1. font-size 속성 값 사용할 수 있는 값(단위) 절대 크기 브라우저에서 미리 정해놓은 크기: xx-small, x-small, small, medium, large, x-large, xx-large 상대 크기 부모 요소 글자 크기 기준으로 더 크거나 작거나: larger, smaller 직접 지정한 크기 CSS 작성자가 직접 지정한 크기: px, pt, em, ex, rem 백분율 부모 요소 글자 크기 기준으로 백분율: 예를 들어 100%는 부모 요소 크기와 같음 - font-size는 글자의 크기를 지정해줍니다. - font-size 속성 값은 위와 .. 2020. 11. 9.
CSS 폰트 스타일: font-family, 웹 폰트(web font) CSS 폰트 스타일: font-family, 웹 폰트(web font) 오늘은 글자 모양을 지정해주는 폰트 관련 스타일을 알아보겠습니다. 1. font-family - 글꼴을 지정해주기 위해서는 font-family 속성을 사용합니다. - 직역하면 '글꼴 가족'이지요. 해당 모양의 글자들을 한 가족으로 모아두었다는 뜻입니다. - font-family 속성은 아래와 같은 형식으로 사용합니다. - font-family { 글꼴 이름, 대체 글꼴 이름1, 대체 글꼴 이름2, ... } - 위 예시를 통해 살펴보겠습니다. - 먼저 id를 "gul"로 지정한 p태그를 살펴보겠습니다. - #gul { font-family: 굴림; } 으로 되어있지요. id가 gul인 p태그는 글꼴을 '굴림'으로 지정한다는 뜻입니다.. 2020. 11. 5.
CSS 선택자(selector): 전체 선택자, tag 선택자, class 선택자, id 선택자 선택자(selector): 전체 선택자, tag 선택자, class 선택자, id 선택자 누구에게 스타일을 적용할지 정해주는 요소를 '선택자(selector)'라고 합니다. CSS에는 다양한 선택자가 있습니다. 오늘은 전체 선택자, tag 선택자, class 선택자, id 선택자에 대해 알아보겠습니다. 1. 전체 선택자(unviersal selector) - 위 예시는 내부 스타일 시트에 CSS를 작성하였습니다. - 즉 head 태그 안쪽에 style 태그를 삽입하여 CSS를 작성한 것입니다. - 전체 선택자는 모든 요소에 스타일을 적용할 때 사용합니다. - 전체 선택자로 '*' 별표를 사용합니다. - 전체 선택자는 주로 기본 스타일을 초기화할 때 사용합니다. - 웹브라우저마다 고유의 기본 스타일이 정해.. 2020. 11. 4.
CSS란 무엇일까? CSS란 무엇일까? HTML이 집의 뼈대를 세우는데 사용하는 언어였다면, CSS는 집을 멋지게 꾸며주는 언어입니다. 뼈대 없이는 집을 지을 수 없듯이, HTML을 공부하지 않았다면 HTML 먼저 공부하고 CSS를 공부하시기 바랍니다. HTML이란? HTML이란? 1. HTML이란? - 홈페이지 만들기를 '집 짓기'로 비유해보겠습니다. - HTML은 집의 뼈대를 만드는 것과 같습니다. 바닥을 다지고, 철근 및 콘크리트로 집의 기본 구조를 잡는 것이지요. 2. HyperText Markup makinghome.tistory.com 1. CSS란 무엇일까? - CSS란 'Cascading Style Sheets'의 줄임말입니다. - Cascading은 '종속의', '위에서 아래로 흐르는'을 뜻합니다. - St.. 2020. 10. 29.
HTML 시맨틱(semantic) 태그: header nav section article footer address aside (HTML 시맨틱 태그: header nav section article aside footer address '시맨틱(semantic)'이란 '의미의' 또는 '의미가 통하는'이라는 뜻입니다. 따라서 '시맨틱 태그'란 '의미적 태그' 정도로 해석할 수 있겠습니다. 시맨틱 태그는 특별한 기능은 없으나, 이 태그를 사용함으로써 페이지 구조를 더 쉽게 이해하게 할 수 있습니다. 시맨틱 태그는 주로 레이아웃을 짜는 데 많이 사용합니다. 어디가 머리말인지, 본문은 어디인지 등 시맨틱 태그를 활용해 컨텐츠들을 묶어줍니다. 이렇게 시맨틱 태그를 사용하면 프로그래머, 검색엔진, 시각장애인 등이 웹페이지를 한 눈에 이해할 수 있게됩니다. 1. header nav 태그 - header 태그는 머리말을 나타냅니다. - 웹페.. 2020. 10. 27.
HTML audio video source 태그 HTML audio video source track 태그 오늘은 오디오와 비디오 파일을 삽입하는 방법을 알아보겠습니다. 1. audio 태그 - audio 태그는 오디오 파일을 삽입하는데 사용합니다. - 대부분의 브라우저에서는 가능하면 mp3 형식의 파일을 삽입합니다. - audio 태그는 src controls autoplay loop muted preload 속성을 가질 수 있습니다. - src 속성은 파일의 경로를 지정해줍니다. 필수요소입니다. - controls 속성을 지정하면 웹브라우저에 오디오를 제어하는 콘트롤 박스를 만들어줍니다. - 위 예시에서 초록색으로 표시해둔 부분이 controls로 나타난 부분입니다. - autoplay 속성을 지정하면 웹브라우저가 로드되었을 때 오디오를 자동으로 .. 2020. 10. 25.
반응형