html기초 썸네일형 리스트형 [HTML/CSS 기초 강의] ⑳ 이미지 정렬3(#div) 이미지 정렬3(#div)하는 방법에 대해 알아보려고 한다. 1. 태그 이미지 수직 정렬은 CSS의 vertical-align 속성 이용, 수평 정렬은 CSS의 float 속성 이용 수평 방향으로 가운데 정렬 불가능-이미지는 텍스트와 같은 inline 요소이기 때문 그러면 이미지를 가운데 정렬할 수 있는 방법은 없을까? 이미지를 가운데 정렬하기 위해서는 먼저 이미지를 블록 레벨 요소처럼 만들어야 함 정렬하려는 이미지가 있는 줄에는 다른 텍스트 없이 이미지만 있어야 한다는 뜻 이때! 사용할 수 있는 것이 태그 태그는 HTML 요소들을 블록 레벨 요소로 묶는 역할함 인라인 요소인 이미지를 태그로 감싸고, text-align 속성을 쓰면 이미지를 왼쪽/오른쪽/가운데 정렬할 수 있음 text-align .. 더보기 [HTML/CSS 기초 강의] ⑭ <span> 태그 오늘은 태그에 대해 알아보려고 한다. CSS: HTML 문서에 스타일(글자색이나 크기, 문단 정렬 등)을 입힐 때 사용 HTML에 CSS를 적용하는 방식 3가지 1. 각 태그에 style 속성 하나하나 지정하는 인라인(inline) 방식 2. 태그 안에 태그를 쓰고 그 안에 스타일 관련 코드를 모두 넣는 내부 스타일시트(Internal CSS) 3. 독립된 별도의 파일에 스타일 지정하는 외부 스타일시트(External CSS) 적용- 1번 인라인 방식으로 글자 크기 변경 인라인 방식으로 스타일 속성 지정하는 방법 태그 태그 전체가 아니라 태그 안에서 일부 글자만 크기 변경 예) 태그 안의 '여기만 type size 크게 ' 부분만 글자 크기 3배로 하려면? 1. 태그 태그 안에는 글자 크기를 그대로 두.. 더보기 [HTML/CSS 기초 강의] ⑬ 선택자 selector 오늘은 선택자 selector에 대해 알아보려고 한다. 선택자(selector)- 스타일 적용 대상 지정/css 핵심 개념 내부 스타일 시트는 부분에, 외부 스타일 시트는 별도의 파일에 스타일 관련 코드 입력함. 웹 페이지 전체에 동일한 스타일 적용하면 문제가 안되지만, 일반적으로 웹페이지 각 부분마다 다른 스타일을 적용 예) 상단에는 바다 배경에 글 오른 정렬, 또 하단에는 배경 없이 일러스트 삽입에 왼쪽 정렬과 같이 부분적으로 다른 디자인인 경우, 각 스타일을 어디에 적용할지, 범위 지정해 줄 필요 있음 1. 전체 선택자 어떤 스타일을 웹 문서 전체에 적용할 때 사용 *{속성명:속성값;} 2. 태그 선택자 특정 태그에 스타일 적용할 때 사용 태그 선택자를 사용하면 같은 이름을 가진 태그 모.. 더보기 [HTML/CSS 기초 강의] ⑫ HTML에 CSS적용 오늘은 HTML에 CSS적용에 대해 알아보려고 한다. 웹 문서(HTML)에 CSS로 디자인 적용 방법 ① 인라인 (Inline CSS) - HTML 태그에 직접 적용 ② 내부 스타일 시트(Internal CSS) - 태그에 스타일 정의 ③ 외부 스타일 시트(External CSS) - 별도 파일 호출 1. 인라인 (Inline CSS) HTML 본문, 각 태그에 직접 CSS 코드를 입력하는 방식 html 태그 안에 style 속성을 직접 지정 장점: 가장 직관적이기 때문에 초보자 입장에서 익숙하고 편함 but CSS가 생긴 이유? 태그마다 스타일을 지정하는 것이 복잡하고 번거로움( Inline 방식) 2. 내부 스타일 시트(Internal CSS) HTML 문서는 와 로 구성 는 웹 페이지에는 직접 표.. 더보기 [HTML기초강의] ⑪ 순서있는 <ol>,목록중첩 순서있는 ,목록중첩에 대해 알아보려고 한다. 1. 태그 항목을 나열할 때 태그 사용 2. 태그 항목들을 순서 있게 묶어줄 때 사용하는 것은태그, ol은 order list의 약자로, 순서 있는 목록 의미 3. 사용법 나열할 각 항목을 태그로 감싸준 후, 태그를 포함한 해당 항목 전체를 로 감싸기 항목1 항목2 항목5(?) ① 메모장을 열고 입력 ② 아래와 같이 항목들 입력하고 , 태그로 감싸기 ③ , 태그로 나열한 항목들 묶어주기 ④ 목록의 제목은 태그 안에 써도 되고 h1에 써 줘도 됨 순서 있는 목록 태그 ol 블록 요소 / 자동으로 숫자가 부여 감자를 1/4 크기로 잘라욤 부드러워질 때까지 15분-20분 동안 소금물에 서서히 끓인다. 감자의 물을 따라 내고 으깬주세욤! 우유, 버터, 육두구를 .. 더보기 [HTML 기초 강의] ⑩ 순서 없는 <ul>, <li> 태그 순서 없는 , 태그에 대해 알아보려고 한다. 1. 태그 항목을 나열할 때 태그 사용 2. 태그 항목들을 순서 없이 묶어줄 때 사용하는 것은 태그, ul은 unordered list의 약자로, 순서 없는 목록 의미 3. 사용법 나열할 각 항목을 태그로 감싸준 후, 태그를 포함한 해당 항목 전체를 로 감싸기 항목1 항목1 항목(?) ① 메모장을 열고 아래 내용 입력 ② 아래와 같이 항목들을 입력하고 , 태그로 감싸기 (글머리 기호는 태그를 이용해 자동으로 붙일 것이기 때문에 따로 기호를 붙이지 않음) ③ , 태그로 나열한 항목들을 묶어주기 ④ 목록의 제목은 태그 안에 써도 되고 h1에 써 줘도 됨 순서 없는 목록 태그 ul 블록 요소 감자 2개를 강판에 채썰기해욤! 채 썬 감자에 감자전분, 밀가루 한스.. 더보기 [HTML 기초 강의] ⑨동영상 삽입 iframe video 오늘은 동영상(video) 삽입 방법을 알아보려고 한다. 1. 태그 동영상을 삽입할 때 사용하는 기본 태그는 태그 iframe은 inline frame의 약자로 ‘내부의 틀’ 의미 이 태그를 사용하면 HTML 페이지에 틀을 만들고, 그 안에 다른 HTML 페이지를 보여줌. 예) 내가 만든 웹페이지 한쪽에 동영상이나 네이버 메인 페이지가 보이게 할 수 있다는 것이죠. 동영상이나 웹사이트를 연결할 때 저작권이나 악성코드 감염 주의!! 플레이 창 크기를 조절- 가로, 세로 길이를 픽셀로 정하기 2. 동영상 삽입 ① 메모장을 열고 입력 ② Youtube에서 동영상을 찾기 예) 고양이 검색 후 원하는 동영상 클릭 ③ 동영상에 마우스를 놓고 우클릭 [소스 코드 복사] 선택 ④ 복사한 소스 코드를 메모장에 붙여 .. 더보기 이전 1 다음
