Web/CSS (6) 썸네일형 리스트형 코드의 재사용 ex) 웹 페이지의 모든 a 태그에 대해 동일한 수정사항이 생겼는데 그 a 태그가 만약 1억 개라면,,, - 이 예제에서 CSS 코드가 모든 웹 페이지에서 동일하게 중복으로 등장 → (1) 새로운 css 파일을 만들어 style 태그의 내용을 저장 (2) 모든 웹 페이지의 style 태그 부분을 제거하고 그 자리에 를 기입 (3) 이제 모든 페이지에서 중복되던 부분을 한 줄의 간단한 링크로 style.css 부분의 내용과 연결 → style.css 파일의 내용을 수정하면 수많은 웹 페이지들에 자동으로 적용 반응형 디자인과 미디어 쿼리 - 반응형 웹(responsive web): 화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해 최적화된 모양으로 바뀌는 것 - 미디어 쿼리: CSS를 통해 반응형 웹을 구현하는 핵심적인 개념 →목표: 미디어 쿼리를 통해 웹의 가로 사이즈가 특정 수준 이상이거나 이하면 태그가 보이지 않게 만드는 것 -우선 responsive라는 단어를 쓴 div 태그 생성 -div 태그 박스 설정 (border값:10px, 초록색 실선, 폰트 크기:60px) -@media(min-width:800px) { div { display:none; } } → min-width(최소 폭)이 800px을 만족할 때 중괄호 안의 내용(=display:none;) 실행 →즉, 폭이 800px을 넘으면 display:none; 실행(.. 그리드 -div: 아무런 의미가 없고, 디자인의 용도로만 사용하는 태그 -block level element(화면 전체 사용) -span: div와 같이 아무런 의미가 없고, 디자인의 용도로만 사용하는 태그 -inline element(자신의 크기만큼만 공간 차지) → 둘의 차이는 block level element vs inline element → 두 개의 태그를 나란히 배치하는 등의 특정한 배치를 하고 싶으면, 그것을 감싸는 부모 태그가 필요하다. 이 예시에서는 디자인의 목적만으로 라는 부모 태그를 만든 것이다. → display:grid; //부모 태그 grid의 display값을 grid로 지정. → grid-template-columns 150px 1fr; //NAVIGATION과 ARTICLE을 두.. 박스 모델 1) Block level element: 화면 전체 차지 ex) h1 태그 2) Inline element: 자신의 크기만큼 공간 차지 ex) a 태그 +) display block level element를 화면 전체가 아닌 자신의 크기만큼만 사용하도록, 즉 inline element가 되도록 설정 → display:inline; 반대로, inline element도 block level element가 되도록 설정 → display:block; 화면에서 안 보이게 설정 → display:none; → 박스의 안쪽부터 content->padding->border->margin -content -width: content의 폭 설정 -height: content의 높이 설정 -padding: conte.. 선택자의 기본 - 우선순위) tag CSS의 기본 문법 1) style 태그 사용 () -ex) - head부분에 작성 - a: 선택자 (selector), color:red;: 선언(declaration) - 선택자(selector): 어느 부분을 ‘선택’해 태그를 적용할 것인지 나타낸다. - 선택자 필요 O: 어느 부분에 style 태그의 효과를 적용할 것인지 지정해주는 과정이 필요하기 때문 2) style 속성 사용 (HTML의 style 속성) -ex) - CSS를 감싸고 있는 a 태그에다가 직접 CSS 코드를 기입 - 그냥 color:red라고 작성 시 웹 브라우저 입장에서는 html인지 css인지 알 수가 없기 때문에 style이라는 속성을 사용하기로 약속 - style 속성을 쓰면 속성의 값을 CSS의 문법에 따라 해석해서 style 속성이 위치.. 이전 1 다음
