★ 요소의 위치, 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 초기화 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 ..
★ 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 안녕하세요. 홍길동입니다. 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더..
★ 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) 기본사용..
★ 아래와 같은 문서를 생성하시오. 조건 : 테이블을 구현하시오. 구현페이지 http://pinnpublic.dothome.co.kr/question/css/table_impl.html Document 10 Saepe 21 Voluptatibus Unde, aliquid Deleniti, quae mollitia pinnpublic.dothome.co.kr ■ 소스코드 Member list Table Design No Name Age ID Description 01 Lorem 21 Lorem Lorem ipsum dolor sit amet 02 Magni 22 Facere Obcaecati accusamus perspiciatis nesciunt corporis 03 Nam 23 Laudantium Ip..
★ OverFlow 박스 안, 내용물이 넘치면 어떻게 할 것인지 처리하는 옵션 width와 height를 지정해주었을 때 사용함. overflow : visible | hidden | scroll | auto visible : 넘쳐도 그대로 보여줌 hidden : 넘치지 않는 정도까지만 보여줌 scroll : scroll이 생겨서, 내용이 넘치든 안넘치든 스크롤바가 생김 auto : 내용이 넘치지 않으면, scroll이 생기지 않고, 넘치면 scroll이 생김 ■ 스크롤이 넘쳤을 때 소스코드 상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다...
★ HTML/CSS 케밥 표기법 aaa-bbb-ccc CSS의 대부분의 속성은 모든 태그에 적용이 가능하다! ★ CSS 색상 표현법 1. Color name : red, yellow, blue ... 2. RGB color(HEX) : #FF0055 3. RGB color(DEC) : rgb(255,0,128) 4. RGBA color(DEC) : rgba(255,255,255,1) a(alpha channel - 불투명도(0~1)) body { /* background-color: yellow; */ /* background-color: rgb(9, 115, 236); */ background-color: rgba(0,0,255,.5); } ★ , 블럭 태그 블럭 태그 영역 너비 : 100% 높이 : ..
★ 충돌 선택자 충돌 동일한 태그를 서로 다른 선택자가 동시에 선택했을 때 발생 ★ 선택자 우선 순위 충돌이 발생하면 우선 순위가 높은 선택자가 적용 점수 계산 선택자 점수 계산 1. 태그 선택자 > 1점> "사람" 2. 클래스 선택자 > 10점> "남자" 3. 아이디 선택자 > 100점> "홍길동" ■ 선택자 충돌 ex) 동일한 조건 아래 div가 적용됨 /* 선택자 충돌 */ div { color : red;} div { font-style : italic;} 선택자 충돌 + 속성 충돌 아래 div 적용됨 /* 선택자 충돌 + 속성 충돌 */ div { color : red;} div { color : yellow;} 우선 순위가 다른 충돌 id 선택자인 box1이 적용됨 div { color : r..
