명언 썸네일형 리스트형 [HTML/CSS 기초 강의] ⑱ 이미지 정렬1(#align) 이미지 정렬1(#align)하는 방법을 알아보려고 한다. 1.align 속성 align 속성-이미지를 나타내는 태그는 인라인 요소임 그래서 이미지 앞뒤로 줄 바꿈이 되지 않고 주변 텍스트에 이어져서 같은 줄에 보임 결국 이미지는 주변 텍스트 기준으로 정렬 됨 예) {이미지정렬+이미지+이미지정렬} 순서로 코드 짜려고 함 2.수직 방향(vertical align) 수직 방향(vertical align)은 위(top) ,아래(bottom), 중간(middle) 가능 디폴트는 아래 이고 수평 방향 순서는 코드 순서대로 이미지정렬(글) 다음에 이미지가 나오고, 이미지 다음에 이미지정렬(글)이어짐 3.수평 방향(horizontal align) 수평 정렬과 수직 정렬의 차이점 - 제한 사항이 있음 예) {이미지정렬.. 더보기 [HTML/CSS 기초 강의] ⑰ <span><div>비교 오늘은 태그를 비교 해보려고 한다. 1. & 비교 공통점 HTML 문서 구조를 나타내지 않고 사용자의 필요에 따라 문서 요소를 묶거나 구별 차이점 태그로 묶인 덩어리는 블럭레벨 요소 앞뒤 줄 바꿈도 되고 너비/높이 조정가능 태그 사용하여 인라인 요소를 블록레벨 요소로 바꾼 것과 비슷한 결과를 얻을 수 있음 태그로 묶인 덩어리는 인라인레벨 요소 줄 바꿈이 되지 않고 주변 텍스트에 연결되어 표시 너비/높이를 정할 수 없음 2. & 적용전 파일 ① 메모장이나 VS Code 실행 ② 코드 입력-블록 레벨 요소 과 인라인 요소 에 각각 파란 테두리 표시 ③ [파일 > 다른 이름으로 저장] ④ 파일 저장 위치 선택 /파일 이름 'div&span.html'로 입력/파일 형식은 모든 파일, 인코딩은 UTF-8 선택 후.. 더보기 [HTML/CSS 기초 강의] ⑯ <div> 태그 오늘은 태그에 대해 알아보려고 한다. 1. 태그 div？ '구분, 분류'를 뜻하는 division 약자 HTML 문서 구조와 상관없이 태그는 여러 요소들을 하나로 묶어서 구분 CSS에서 스타일 지정할 때 사용(참고-JavaScript로 작업을 수행시도 사용) 예) 2구역에는 텍스트와 함께 목록을 배치, 3에는 단락과 이미지, 동영상 등..등 삽입 앞에서 배웠지만 목록을 나타내는 , 와 단락을 나타내는 는 블록레벨 요소 자동으로 줄 바꿈이 되기 때문에 가로로 나란히 놓을 수 없음 따라서 태그를 사용하여 2에 들어갈 텍스트와 목록을 하나로 묶고, 3에 들어갈 단락과 이미지, 동영상을 하나로 묶어야 가능함- 태그로 요소들을 묶어 놓으면 배경색이나 테두리 등의 스타일을 구역별로 적용하기 용이함 태그는 웹.. 더보기 [HTML/CSS 기초 강의] ⑮ <display> 태그 오늘은 태그에 대해 알아보려고 한다. 1. 태그 속성명은 display, 속성 값은 none/block/inline/inline-block 중 하나 선택 화면에 요소 표시하는 방식- 웹 문서를 보여주는 방식과 관련, 그래서 HTML 태그가 아니라, CSS 속성에 해당함 속성 속성값 내용 disply non 화면에 표시X (영역 차지X) block 블럭 요소로 표시, 너비/높이 설정 가능 inline 인라인 요소로 표시, 너비/높이 설정 불가 inline-block 인라인 요소이나 너비/높이 설정 가능 인라인 방식, 내부 스타일시트 방식, 외부 스타일 시트 방식 중 원하는 방식 선택 예) 내부 스타일 시트 방식- 2.display 속성 사용전 파일 ① 메모장열기 ② 아래와 같이 코드를 입력 ③ [파일 .. 더보기 [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 기초 강의] ③ HTML이란? HTML이란? 1.Hyper Text Makeup Language Hyper Text Makeup Language의 약자로 Hyper Text(하이퍼 텍스트) 기능을 가진 문서를 만드는 언어이다. 링크를 통해 자유롭게 이동이 가능하다는 것이 하이퍼텍스트의 가장 큰 특징 파일 형식은 '*. html'이나 '*. htm'으로 저장 2. HTML은 프로그래밍 언어가 아니다(?) 마크업 언어는 프로그래밍 언어가 아니라고 본다. 마크업 언어는 프로그래밍 언어의 가장 큰 특징이라고 할 수 있는 계산, 조건문이나 반복문을 사용할 수가 없기 때문. 웹페이지에서 프로그래밍을 하려면 HTML뿐만 아니라 프로그래밍 언어인 JavaScript도 사용해야 한다. 3. 웹프로그래밍 하려면 무엇이 필요? 홈페이지를 만드는 것부터,.. 더보기 [HTML/CSS 기초 강의] ② 비주얼 스튜디오 코드 사용법 1.VS Code 기본 설정하기 ① 바탕 화면의 VS Code 아이콘을 더블클릭 ② 왼쪽 툴바에서 네모 모양의 확장기능 아이콘을 클릭 [단축키 Ctrl+Shif] ③ file > preferences > settings (ctrl+,) font-size, font-family, tab size, word wrap 등 설정. ④ file > preferences > extensions (ctrl+shift+x) 사용중인 VS Code(Visual Studio Code)확장 플러그인 목록 auto rename tag- 태그는 시작태그와 맺음태그를 가지고 있음/예로 처럼/이럴때 이 익스텐션이 설치되어 있다면 시작, 맺음 태그 하나만 수정해도 자동으로 같이 수정됨 color highlight- #fff rab(.. 더보기 이전 1 다음
