본문 바로가기

명언

[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(.. 더보기