CSS(3)
-
[HTML] CSS 적용 우선순위 - CSS Specificity
요소에 CSS 의 속성 값을 적용할 때 만약 2개 이상의 CSS 의 속성 값이 같은 요소를 가리키는 경우 어떤 CSS 속성 값을 우선 적용하게 될까? 이 때 적용되는 기준이 바로 'CSS Specificity(CSS 특이성)' 이다. 우선순위가 높은 특이성을 가진 CSS 에 작성된 속성이 HTML 요소에 적용된다고 한다. 오늘은 이 CSS Specificity 에 대해 알아보자. 1. CSS Specificity HTML 문서 작성시 문서내의 요소를 2개 이상의 CSS 속성이 가리키는 경우가 생기거나 더러있다. 이럴 경우 어떤 CSS 속성을 기준으로 요소에 속성 값이 적용될까? 이럴 때 어떤 CSS 의 속성을 요소에 적용할지 결정하는 기준(점수,등급)이 CSS Specificity 이다. 1-1. 상..
2024.08.30 -
[HTML] 꾸미기 - <style>, CSS
CSS 란 'Cascading Style Sheets(계단식 스타일 시트)' 의 약어로 다양한 정의가 있겠지만 한 마디로 화면을 꾸며주는 역할을 한다. 그래도 정확한 기능을 적어보자면 '여러 웹 페이지의 레이아웃을 한 번에 제어하여 많은 작업을 줄여준다' 고 한다. HTML 문서에 CSS 를 적용하는 방법은 3가지가 있다고 한다.Inline : HTML 요소(=태그) 내부의 style 속성을 사용. 이건 아마 태그별 속성을 사용해 특정 값을 지정하여 형태를 취하는 걸 말하는 것 같다.Internal : HTML 문서의 스타일 정보(=CSS) 를 정의하는데 사용되는 태그 꾸며야 한다? 그럼 영역의 너비(width)와 높이(height)를 지정할 때 사용 한 마디로 영역의 가로, 세로 길이를 지정하는 것!각..
2024.08.27 -
[Front-end] HTML, CSS, Bootstrap 활용 실습
※ 참고 : 해당 게시글은 각 언어의 함수 또는 기능을 세세하게 다루지 않았습니다. 실습에 사용한 내용을 정리한 글인 점을 알립니다. HTML, CSS 그리고 Bootstrap 을 활용한 실습에서 구현한 내용을 정리하는 것이 목적이다. 실습 결과 이미지이다. 위와 같은 결과를 출력하기 위해 작성한 코드를 하나씩 뜯어보며 되짚어 보려한다. 아래는 실습에 사용한 코드이다. 나만의 추억 앨범 추억 저장하기 앨범 이미지 앨범 제목 앨범 내용 ..
2024.08.26