고래씌

1. FlexBox - 요소의 정렬되는 방향, 순서, 요소간의 간격을 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식 ▶ Flexbox를 이용할 때 반드시 알아야되는 것 1) Flex-Container : 정렬이 필요한 요소를 감싸는 요소 item : 정렬을 적용할 요소 (flex-container와 item에 사용되는 flex 관련 css속성이 나누어져 있음) 2) Flexbox의 축 - 중심축(main axis) - 교차축, 반대축(cross axis) ■ HTML Flex Box item1 item2 item3 item4 item5 item6 item7 item8 item9 ■ CSS 파일(style.css) div{ border: 1px solid black; box-sizing: bo..

1. 배치 관련 스타일(position) : position은 요소의 위치를 지정하는 속성 ▶ position : relative; (상대적인) - 지정된 요소 내부에 다른 요소가 "상대적인" 위치를 지정할 수 있도록 기준이 되게 만드는 속성 - 내부에 작성되는 요소에 위치 지정시 top, bottom, left, right등의 속성을 사용할 수 있음 ▶ position : absolute; (절대적인) - 기본 요소의 배치 순서를 무시하고 지정된 위치에 요소를 배치한다 ▶ position : fixed; (고정된) - 항상 고정된 위치에 요소를 배치함(화면이 움직이든 말든 항상 같은 위치) ■ HTML first second third ■ css 파일 div{ border: 1px solid black..

1. 요소 정렬 스타일(float / clear) ▶ float(뜨다, 띄우다, 뜨는 물건) : 요소를 띄어서 좌/우로 정렬하는 속성 ▶ clear : float로 인해 띄워져 있는 상태를 해제하는 속성(float 사용시 겹침 문제가 발생하는데 이를 해결해주는 속성) ■ HTML 파일 DOCTYPE html> 9_레이아웃스타일3 요소 정렬 스타일(float / clear) 기본 형태 1 2 3 hello hello hello 4 5 float : left; 형태 1 2 3 hello hello hello 4 5 float : right; 형태 1 2 3 hello hello hello 4 5 ■ css 파일(기본형태) div{ border: 1px solid black; box-sizing: border..

1. 요소의 영역 관련 속성 ▶ HTML 요소의 영역들 ① content 영역 - 요소의 내용이 작성되어지는 영역(시작태그와 종료태그 사이에 작성되는 내용들) ② padding 영역 - content영역과 border 영역 사이 ③ border 영역 - 요소의 테두리가 지정되는 영역 - content 보다 바깥쪽에서 content를 감싸고 있음 ④ margin 영역 - 다른 요소와의 간격을 나타내는 영역 1) 기준, content영역, border영역, padding 영역, margin 영역 ■ HTML 파일 DOCTYPE html> 8_레이아웃스타일2 요소의 영역 관련 속성 기준 내용입니다 content영역 내용입니다 border영역 내용입니다 padding영역 내용입니다 margin영역 내용입니다 내..

1. 레이아웃(Layout) - 사전적 의미 : 배치, 정리 - 기술적 의미 : 구성 요소들을 제한된 공간안에 효율적으로 배치하는 것을 의미 ▶ 요소가 화면에 어떻게 보여질지 형식을 지정하는 속성 - block : 화면을 수직 분할(행을 나눔) + width/height 속성 사용 가능 - inline : 화면을 수평 분할(하나의 행의 컬럼을 나눔 == 글자처럼 생각) + width/height 속성 사용 불가 - inline-block : inline의 수평분할 + block 크기조절 - none : 화면에 요소가 표시되지는 않으나 존재는 하고 있는 상태 - flex : 요소의 정렬되는 방향, 요소 간의 간격을 유연하게 처리하는 방식 ■ HTML파일 레이아웃(layout) block 형식의 요소를 in..

1. CSS 선택자 우선순위 - 기본적으로 css 속성은 style태그 또는 css 파일에 작성된 순서(위에서부터 아래로)대로 해석이 진행되지만 같은 요소에 여러 css 속성이 설정되는 경우 우선순위가 적용된다. ※ 참고 ① 동일한 우선 순위로 css 속성이 설정된 경우 → 제일 마지막에 작성된 css 속성이 반영된다. ② 여러 선택자를 이용해서 같은 요소를 선택하더라도 지정되는 css 속성이 다르면 모두 반영된다. ▶ 우선순위 1순위 : css 속성 : 속성값 !important; (!important는 뭐가 되었던 항상 1순위로 적용된다!!(★ 매우 중요★) 2순위 : inline-style 속성(요소에 직접 작성되는 style속성) 3순위 : 아이디 선택자(아이디 속성명) 4순위 : 클래스 선택자(..

1. 기타 선택자 1) :onlychild - 특정 요소의 자식이 하나밖에 없을 때 선택 ■ HTML 파일 기타 선택자 자식1 자식2 ■ selector5.css 파일 /* :only-child */ #test1 > p:only-child{ background-color: steelblue; } ☞ p태그는 하나밖에 없지만 같은 p계열 태그인 pre 태그가 하나 더 있기 때문에 적용이 안됨. 만약 p태그 하나만 있었다면 적용됐음 자식1 ☞ pre태그를 삭제한 결과 p태그 하나만 있어서 적용되는 것을 볼 수 있음 2) :only-of-type - 특정 요소의 자식 중 지정된 형태와 같은 자식 요소가 하나만 있을 때 선택 ■ HTML 파일 내 body 태그 안 자식1 자식2 ■ selector5.css 파일..

1. 일반 구조 선택자 : 형제 관계에 있는 요소들 중 특정 요소를 선택하는 선택자 ① :first_child ② :last-child ③ :nth-child(수) ④ :nth-last-child(수) ■ html파일 일반 구조 선택자 형제 관계에 있는 요소중 특정 요소를 선택하는 선택자 :first-child :last-child :nth-child(수) :nth-last-child(수) 테스트1 테스트2 테스트3 테스트4 테스트5 테스트6 ■ selector4.css 파일(① :frist-child) /* :first-child : 형제 관계의 요소중 첫 번째 요소 */ /* test1의 자식 p태그들 중에 첫번째 자식만 선택하겠다 */ #test1>p:first-child{ background-co..

1. 문자열 속성 선택자 : 속성값의 문자열을 확인하여 스타일 적용하는 방식의 선택자 ■ html 파일내의 body 태그 문자열 속성 선택자 div1 div2 div3 div4 ☞ 여기에 여러 속성을 추가해보도록 하겠다 1) 선택자[속성명~=속성값] {css코드} → 띄어쓰기로 구분되어 있는 여러 속성 값이 작성된 속성 중 속성 값이 특정 값을 단어로 포함하는 요소를 선택 /* ~= : 여러 속성 값들 중 하나라도 일치하면 선택 */ div[name~="aaa"]{ background-color: greenyellow; } 2) 선택자[속성명 |= 속성값] {css코드} → 속성 값이 특정 값을 단어로 포함하는 요소를 선택 단, "-" 기호로 구분한다. 즉 "-" 앞의 내용이 동일해야한다. /* |= :..

1. 기본 속성 선택자 - 태그에 작성된 특정 속성을 선택하는 선택자 (id, class도 선택가능하지만 보통 아이디는 #, 클래스는 . 을 사용함) [작성법] 선택자[속성명="속성값"] {css코드} (참고) ① 선택자 부분은 생략이 가능 ☞ 특정속성을 가진 모든 요소 선택 ② 속성값 양쪽에 쌍따옴표를 추가해야한다. ☞ 홀따옴표(' ')로 사용하거나, 생략도 가능함 ▶ link 태그 : 외부 css 파일과 연결하는 태그 => rel="" 이 파일이 stylesheet 파일이라는 것을 알리기 위해 작성해야한다! => 이것을 작성안하면 css파일의 style 적용이 안됨 ■ selctor2.css 파일 /* CSS 파일 파일 전체가 태그 내부라고 생각하면 됨 */ /* 기본 속성 선택자 */ /* 모든 d..