전체 글

[Box model] padding 요소의 크기증가

padding은 요소의 내부 여백을 지정하는 속성이다. 내부 여백을 추가하면 padding 값 만큼 요소의 크기가 커지게 된다. 따라서 크기가 커지지 않도록 padding이 추가된 만큼 width와 height 값을 다시 계산 해야한다. 예를 들어 100 X 100 px 크기의 요소를 만든다고 하자 1. 직접 계산 100 X 100 px 의 요소를 만들려면 padding을 통해 커지는 너비를 고려해서 직접 계산해준다. .box { width: 60px; /* +40px */ height: 80px; /* +20px */ background: red; padding: 10px 20px; } 2. 자동 계산 box-sizing: border-box 를 추가하는 방법. 늘어날 크기를 고려하지 않아도 요소의 크..

[Box model] margin 중복

마진 중복(병합) 마진의 특정 값들이 '중복'되어 합쳐지는 현상. 마진 중복은 버그(오류)가 아니다. 현상을 우회하거나 응용할 수 있다. 형제 요소들의 margin-top과 margin-bottom이 만났을 때 부모 요소의 margin-top과 자식요소의 margin-top이 만났을 때 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때 마진 중복 계산법 조건 요소A 마진 요소B 마진 계산법 중복값 둘 다 양수 30px 10px 더 큰 값으로 중복 30px 둘 다 음수 -30px -10px 더 작은값으로 중복 -30px 각각 양수와 음수 -30px 10px -30+10=-20 -20px

단위

px / % px : 해상도에 따른 상대 단위. (해상도에 따라서 px 단위가 조금씩 변함) % : 부모요소의 가로 사이즈에 영향을 받는다. em / rem em : 자기 자신의 폰트 사이즈의 영향을 받음 rem : HTML에 지정된 폰트사이즈에만 영향을 받음 em 위의 예시의 경우 600px을 10px로 나누면 60이므로 60em으로 단위를 고치면 600px과 동일한 값을 가진다. container > parent > child의 구조인데 font 속성의 경우 상속되는 속성이므로 자식(하위)요소에 font-size가 명시되어 있지 않으면 부모(상위)요소들로부터 font-size를 상속받아 font-size: 10px로 설정되어 있다고 생각하면 된다. 만일 .parent의 font-size를 2em으로 ..

우선순위

같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법이다. 명시도 점수가 높은 선언이 우선 (명시도) 점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선 (선언 순서) 명시도는 '상속' 규칙보다 우선 (중요도) !important 가 적용된 선언 방식이 다른 모든 방식보다 우선 (중요도) 1. 가장 중요 (!important) 모든 선언을 무시하고 가장 우선 점수: ∞ pt div { color: red !important; } /* 가장 우선 */ 2. 인라인 선언 방식 인라인 선언 (HTML style 속성을 사용) 점수가 높기 때문에 유지보수에 제약이 많다. (비추천) 점수: 1,000 pt Hello world! 3. 아이디 선택자 고..

속성 선택자

HTML의 속성을 attribute라고하고, CSS의 속성은 property라고 한다. [attr] 속성 attr을 포함한 요소를 선택한다. 예를들어 입력창의 투명도를 낮추고 싶다고 하자. 일반적으로 투명도를 낮추고 싶은 태그에 클래스로 별명을 부여하여 css를 통해서 투명도를 조정할 수 있지만, 이 또한 일일이 별명을 부여해야한다는 번거로움이 있다. 따라서 별명을 부여하지 않고도 주어진 속성만 가지고 특정한 요소를 선택하는 방법이 속성 선택자이다. [attr=value] 속성 attr을 포함하여 속성 값이 value인 요소 선택 이때 값에 해당하는 것은 ""를 생략할 수도 있다. [attr^=value] 속성 attr을 포함하여 속성 값이 value로 시작하는 요소 선택 해당 앞글자로 시작하는 속성-값..

가상 선택자

가상 클래스 선택자 선택자 앞에 : 을 붙여서 선택한다. 사용자가 특정한 동작(이벤트)을 일으켰을 때 변화가 되는 선택자로는 hover, acitve, focus 가 있다. (보통은 동작의 경우 JS로 수행하는데 특이한 케이스) hover E 에 마우스 포인터가 올라가있는 동안에만 E 선택 마우스를 위에 가져다 두었을 때 해당 선택자에 작성된 CSS가 적용됨 E:hover Active E 를 마우스로 클릭하는 동안에만 E 선택 E:active Focus E 가 포커스 된 동안에만 E 선택 대화형 콘텐츠에서 사용 가능 (input, img, tabindex) E:focus 예) 입력창이 포커스됐을 때 빨간색으로 테두리 지정 input 박스의 테두리의 경우 outline을 사용하는데 이는 다루기에 까다로우므..

복합 선택자

1. 일치 선택자 E와 F를 동시에 만족하는 요소 선택자 EF // css span.orange { color: red; } // html 사과 딸기 오렌지 당근 토마토 오렌지 2. 자식 선택자 E의 자식 요소 F를 선택 E > F // css ul > .orange { color: red; } // html 사과 딸기 오렌지 당근 토마토 오렌지 3. 후손(하위) 선택자 E의 후손(하위) 요소 F를 선택 E 태그 내에 모든 하위태그들은 후손을 의미 E F // css div .orange { color: red; } // html 사과 딸기 오렌지 당근 토마토 오렌지 4. 인접 형제 선택자 E의 다음 형제 요소 F 하나만 선택 E + F // css .orange + li { color: red; } /..

label

라벨 가능 요소의 제목 for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함 라벨 가능요소: , , , , 속성 의미 for 참조한 라벨 가능 요소의 id 속성 값 동의하십니까? /* id "user-agreement"를 가진 요소를 포함함 */ 동의하십니까? /* 위와 동일한 효과. 요소와 텍스트를 label로 랩핑해줌 */

인라인 텍스트

다른 페이지, 같은 위치(#), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정 속성 의미 값 기본값 특징 download 리소스를 다운로드하는 용도로 사용됨을 의미 Boolean href 링크 URL URL 생략 가능 hreflang 링크 URL 페이지 언어 ko, en 등 rel 현재 문서와 링크 URL의 관계 (Link types) license, prev, next 등 target 링크 URL의 표시 위치 _self, _blank _self type 링크 URL의 MIME 타입 text/html 등 생략 가능 약어를 지정한다. Abbreviation. 보통 title 속성을 사용하여 전체 글자나 설명을 제공한다. 사용할 때 지정하고자 하는 약어를 드래그 한 다음,..

HEAD에 포함되는 태그

HEAD에 포함되는 정보 : HTML 문서의 제목 : 사이트 정보 : CSS 스타일 작성 : 주로 스타일시트를 연결할 때 사용. 그 외에 파비콘 연결 등 : 문서 안의 모든 상대 URL이 사용할 기준 URL 지정 META meta 태그는 빈태그이다. 로 열린 형식. 태그 속성 charset: HEAD에서 가장 처음에 위치하여 문자 인코딩 방식을 선언한다. (=character set) UTF-8 (조합형): 구성된 것만 있어도 가능(ㅎㅗㅇㄱㅣㄹㄷ) EUC-KR (완성형): 완성된 글자 자체를 찾는 방식(홍 길 동) - 완성된 글자를 찾지 못할 경우 글자가 깨지는 현상 content: name 또는 http-equiv 속성의 값을 작성할 때 사용하는 속성 예) http-equiv: 서버나 사용자 환경의 작..

블록요소 / 인라인 요소 특징

블록 요소 인라인 요소 예) div, h1, p 태그 예) span, img 태그 사용 가능한 최대 가로 너비를 사용한다. 필요한 만큼의 너비를 사용한다. 크기를 지정할 수 있다. 크기를 지정할 수 없다. 기본 auto 값 - width: 100% - height: 0 기본 auto 값 - width: 0 - height: 0 수직으로 쌓임 수평으로 쌓임 margin, padding 위, 아래, 좌, 우 사용 가능하다. margin, padding 위, 아래는 사용할 수 없다. (좌우 사용가능) 레이아웃을 잡는 용도 TEXT를 작업하는 용도 *padding은 여백을 만들어 시각적인 거리를 만들어낼 수는 있지만, 실질적인 요소와의 거리, 공간을 만들어내지는 못한다. 인라인의 수평구조: 한줄로 작성할 경우 ..

랜덤으로 배열 속 내용 추출하기

const data = [ "1. 바나나", "2. 사과", "3. 배", ]; function randomValueFromArray(array) { const random = Math.floor(Math.random() * array.length); return array[random]; } let fruit = randomValueFromArray(data); console.log(fruit); // Math.floor() : 가장 큰 정수 값을 돌려준다. // Math.random() : 0~1 까지의 난수 실수 값을 돌려준다. 출처/참고 https://suinautant.tistory.com/584