CSS 썸네일형 리스트형 [HTML/CSS 기초 강의] ⑳ 이미지 정렬3(#div) 이미지 정렬3(#div)하는 방법에 대해 알아보려고 한다. 1. 태그 이미지 수직 정렬은 CSS의 vertical-align 속성 이용, 수평 정렬은 CSS의 float 속성 이용 수평 방향으로 가운데 정렬 불가능-이미지는 텍스트와 같은 inline 요소이기 때문 그러면 이미지를 가운데 정렬할 수 있는 방법은 없을까? 이미지를 가운데 정렬하기 위해서는 먼저 이미지를 블록 레벨 요소처럼 만들어야 함 정렬하려는 이미지가 있는 줄에는 다른 텍스트 없이 이미지만 있어야 한다는 뜻 이때! 사용할 수 있는 것이 태그 태그는 HTML 요소들을 블록 레벨 요소로 묶는 역할함 인라인 요소인 이미지를 태그로 감싸고, text-align 속성을 쓰면 이미지를 왼쪽/오른쪽/가운데 정렬할 수 있음 text-align .. 더보기 [HTML/CSS 기초 강의] ⑱ 이미지 정렬1(#align) 이미지 정렬1(#align)하는 방법을 알아보려고 한다. 1.align 속성 align 속성-이미지를 나타내는 태그는 인라인 요소임 그래서 이미지 앞뒤로 줄 바꿈이 되지 않고 주변 텍스트에 이어져서 같은 줄에 보임 결국 이미지는 주변 텍스트 기준으로 정렬 됨 예) {이미지정렬+이미지+이미지정렬} 순서로 코드 짜려고 함 2.수직 방향(vertical align) 수직 방향(vertical align)은 위(top) ,아래(bottom), 중간(middle) 가능 디폴트는 아래 이고 수평 방향 순서는 코드 순서대로 이미지정렬(글) 다음에 이미지가 나오고, 이미지 다음에 이미지정렬(글)이어짐 3.수평 방향(horizontal align) 수평 정렬과 수직 정렬의 차이점 - 제한 사항이 있음 예) {이미지정렬.. 더보기 [HTML/CSS 기초 강의] ⑲ 이미지 정렬2(#vertical-ailgn#float) 이미지 정렬2(#vertical-ailgn#float)하는 방법을 알아보려고 한다. CSS를 이용하여 이미지 수직/수평 정렬 방법 이미지의 align은 수직과 수평을 통틀어서 하나의 속성명 'align'을 사용 CSS에서는 수직 정렬과 수평 정렬할 때 사용하는 속성명이 다름 1. 수직 정렬 속성명: vertical-align vertical-align의 속성 값- top위쪽 맞춤/middle중간 맞춤/bottom아래쪽 맞춤 vertical-align의 디폴트 값-baseline 아래쪽 맞춤과 비슷 2. 수평 정렬 속성명: float float의 의미: '떠다니다'라는 뜻-텍스트 사이에서 이미지를 왼쪽이나 오른쪽으로 보냄 속성 값은 left/right/ 가운데 정렬 없음 3. 이미지 수직 정렬 연습 메.. 더보기 [HTML/CSS 기초 강의] ㉑ 이미지 가운데 정렬 방법들 이미지 가운데 정렬 방법을 알아보려고 한다. 이미지 가운데 정렬 방법 1. 태그 사용 태그 앞뒤에 , 태그 사용 후 text-align 속성값을 center로 주면 div 안의 인라인 요소 이미지가 가운데 정렬됨 태그 안에 div 선택자도 가능 2. display, margin 사용 display 속성을 사용하여 속성값을 block으로 정하면 이미지를 블록 레벨 요소로 바꿀 수 있음 그 후에 margin을 auto로 주면 이미지가 가운데 정렬 margin:요소를 감싸고 있는 여백 /auto 값: 좌우 여백을 똑같이 주는 것으로 정해져 있음 3. 태그 사용 태그는 블록레벨 요소로, 그 안의 인라인 요소를 가운데 정렬하는 기능 있음 HTML5에서는 지원하지 않는 태그-사용하지 않는 것이 좋음 , 태그는 블록.. 더보기 [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. 태그 태그 안에는 글자 크기를 그대로 두.. 더보기 이전 1 2 다음
