웹/HTML&CSS (12) 썸네일형 리스트형 [HTML/CSS] class, id 클래스, 아이디 / 2021.08.06 * 참고 자료 : 코드잇 HTML/CSS 강의 1. 클래스 예를 들어, 아래와 같은 코드가 있다. 의 글자 크기를 64px, 색을 블루로 입히는 코드이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 id/class example p { font-size: 64px; color: blue; } Heading 1 Heading 2 첫 번째 문단 두 번째 문단 세 번째 문단 네 번째 문단 Colored by Color Scripter cs 웹 페이지를 열어보면 이와 같이 나온다. 만약, 세번째 문단만 64px로 색을 블루로 입히고 싶다면 어떻게 해야 할까? 각각의 태그 4개를 구분할 방법이 없기 때문에 "클래스"를 사용해야 한다. 세 번째 .. [HTML/CSS] 링크, 이미지 / 2021.08.05 * 참고 자료 : 코드잇 HTML/CSS 강의 * 링크 1. 외부페이지로 가는 링크 다른 페이지로 가는 링크를 만들기 위해서는 태그를 사용하면 된다. 태그의 구조 내용 속성 속성 값 예를 들어, 다음 코드를 작성해 보자. 구글로 가는 링크 index.html : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 My First Website h1 { color: lime; } h2 { color: darkred; } h3 { color: blue; } p i { font-size: 30px; } My First Page I love HTML! 안녕 세상! 구글로 가는 링크 Colored by Color Scri.. [HTML/CSS] CSS기초, 옵셔널 태그 / 2021.08.04 * 참고 자료 : 코드잇 HTML/CSS 강의 1. CSS란? HTML이 내용을 담당하는 거라면 CSS는 스타일을 담당한다. 2. CSS 기본 구조 예를들어, CSS의 기본 구조는 다음과 같다. 여기서 h1은 "스타일링하고 싶은 요소"를 뜻하고 font-size, text-align 은 "속성" 64px, center 은 "속성값"을 뜻한다. 1 2 3 4 h1 { font-size: 64px; text-align: center; } cs 이 코드는 "h1의 폰트 사이즈를 64px로 설정하고 h1의 글을 가운데 정렬한다"라는 말이다. 3. CSS의 사용 CSS를 사용하기 위해 html 코드 아래에 4. 기본 CSS 속성 (1) 폰트 크기 css에서 폰트 크기를 표현할 수 있는 단위가 여러개 있는데, 그중.. [HTML/CSS] 첫 번째 웹사이트 만들기 / 2021.07.29 * 참고자료 : 코드잇 HTML/CSS 강의 1. 1 2 cs 웹브라우저에게 HTML버전을 알려주는 역할을 한다. 항상 html문서 맨 위에 써주어야 한다. 2. HTML 태그 내용 시작 태그 종료 태그 종료 태그에는 /가 있다. * 태그의 종류 - 웹페이지의 제목을 나타내는 태그이다. 브라우저의 탭이나 방문 기록에 나와 있는 제목이 이곳에 들어간다. - 가장 큰 머리말. h1은 heading 1을 말한다. - 두 번째로 큰 머리말. h2는 heading 2를 말한다. * 까지 있다. 각 머리말의 크기는 마음대로 설정할 수 있지만, 따로 설정하지 않으면 부터 순서대로 작아진다. - 긴 글, 문단을 나타낸다. paragraph의 약자이다. - 텍스트를 굵게 만들어 준다. - 텍스트를 날려서 써준다. 3. .. 이전 1 2 다음
