웹페이지
CSS STEP 17 - BOX2
★ BOX 사이즈 측정 1. content-box : 상자의 실제 크기 = 너비(높이) + 패딩 + 테두리 2. border-box : 상자의 실제 크기 = 너비(높이) ■ HTML 코드 상자1 상자2 상자3 ■ CSS 코드 ■ 실행 결과
css
웹페이지
CSS STEP 16 - 네이버 뉴스 Form 만들기
★1. 네이버 IT기사 리스트 만들기 https://news.naver.com/main/clusterArticles.naver?id=c_202304152240_00000090&mode=LSD&mid=shm&sid1=105&oid=001&aid=0013884570 ■ HTML 작업 스페이스X 스타십 발사 승인 "17일 비행 목표" 스페이스X 달·화성 탐사우주선 '스타십' 오늘 첫 시험발사 예정 일론 머스크가 이끄는 우주기업 스페이스X의 화성 탐사용 대형 우주선 '스타십(Starship)'이 17일(현지시간) 첫 지구궤도 시험 비행에 나선다. 달 … 뉴스1 머스크 화성 개척 꿈 첫 단추…스타십 이르면 오늘 밤 발사 일런 머스크의 화성 이주 꿈을 담은 우주선 '스타십'이 이르면 오늘 밤 첫 지구궤도 비행에 나..
웹페이지
CSS STEP 15 - Align
★ 태그의 수평 정렬 인라인 태그와 블럭 태그의 수평 정렬 수평 정렬(내용물의 정렬) text-align 1. 인라인 태그 불가능 > 여백(공간)이 없어서 불가능.. 2. 블럭 태그 가능 > 여백(공간)이 있어서.. > text-align 속성은 블럭 태그에서만 적용이 가능하다. 수평 정렬(태그 스스로 정렬) > 불가능(지원하는 속성 없음) 1. 인라인 태그 가능 > 부모(블럭) 태그의 text-align을 사용해서 정렬 2. 블럭 태그 불가능 > 부모영역과 자식 영역이 일치하기 때문에 > 좌우에 공간이 없음. 가능 > margin을 이용 > 좌우 margin을 동일하게 지정(auto) 인라인 태그 #div1 { width:200px; margin-left : auto; margin-right : aut..
웹페이지
CSS STEP 14 - 응용 예제
★ 메뉴를 이용한 사이트 만들기 main : 메인 화면 header : 상위 헤더 section : 내용 list-style-type : 리스트의 스타일을 조정 ■ 소스코드 Java Oracle HTML CSS JavaScript Java Lorem ipsum dolor sit amet consectetur adipisicing elit. Non atque distinctio ex reiciendis? Molestias suscipit magnam animi sed non aspernatur reprehenderit repellendus veritatis ipsa laudantium consequuntur, soluta, quam quia asperiores! Cum consequatur voluptat..
웹페이지
CSS STEP 13 - Position
★ 요소의 위치, Position 1. padding > 부모가 자식의 위치 지정 2. margin > 스스로 위치 지정 3. position > 정석(CSS1 ~ CSS3) 4. transfom > 정석(CSS3) ★ Position 좌표값 사용 > 위치 지정 x(left), y(top) 좌표를 지정하는 방식이 여러개 제공 1. position : static; 1. position : static; - 기본값 - 정적 좌표 - 워드 프로세스 방식 > FlowLayout 방식 - 코딩 순서대로 출력되는 방식 - 먼저 코딩 > 위에 배치, 같은줄 : 왼쪽에 배치 - 나중에 코딩 > 아래에 배치, 오른쪽에 배치 2. position : absolute; 2. position : absolute; - 절대 ..
웹페이지
CSS STEP 12 - Reset CSS
★ CSS 초기화 1. Reset CSS 2. Normalize CSS 3. 디자인 프레임워크 or 라이브러리 Bootstrap 재단 부르마 순수 타키온 etc ...... ■ 1. Reset CSS 모든 CSS를 초기화 시킴 https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this ..
웹페이지
CSS STEP 11 - Float
★ Float 원래 출력되던 위치를 벗어나, 라인의 맨 왼쪽(오른쪽) 끝으로 이동 float : none | left | right float 성질 제거 : 새로운 div를 생성해서 clear 부여! #name1 { color :blue; background-color: yellow; float : left; } #name2 { color : blue; background-color: yellow; float : right; } 실행 화면 ■ ex1) 이미지를 사용한 float 안녕하세요. 홍길동입니다. 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더..
웹페이지
CSS STEP 10 - Display
★ Display 요소의 출력 방식 display : none | inline | block | inline-block; none : 화면에서 안보이게 함 inline : 인라인 태그로 출력 block : 블럭 태그로 출력 inline-block : 인라인 태그처럼 출력 + 너비/높이 지정 가능 ex) 사용법 .box { border: 1px solid black; display : inline; } .link { border : 1px solid black; display : block; } #menu li { border: 3px solid red; display : inline-block; width : calc(20% - 6px); /*calc(자동으로 계산해주는 것)*/ } ■ ex1) 기본사용..
