본문 바로가기

웹 개발/웹프로그래밍29

NN CSS | 9. 미디어 쿼리 미디어 쿼리 반응형 웹사이트를 제작하기 위해 미디어 객체에 따라 다른 스타일을 적용되게 만드는 것 Media Types@media mediaqueries { type } : screen — 화면을 출력하는 디스플레이가 있는 미디어는 다 여기에 속합니다.print — 인쇄시 표현되는 웹 페이지 구성all — screen, print를 포함한 모든 미디어에 표현되는 웹페이지 구성 Media Features미디어 특성 width — 뷰포트의 너비. 브라우저 창의 너비 orientation — 세로모드인지 가로모드인지 구분portrait : 세로모드landscape : 가로모드 미디어 쿼리 구문 syntax[a] : a가 나올 수도 나오지 않을 수도 a | b : a 또는 b 둘 중 하나 선택 a? : a가 0.. 2020. 12. 26.
NN CSS | 6. 레이아웃 렌더링 박스 유형 display none : 요소가 렌더링 되지 않음 inline : inline level 요소처럼 렌더링. 같은 라인안에 표시 block : block level 요소처럼 렌더링. 특정 구역을 차지 inline-block : inline level 요소처럼 렌더링되지만 block level의 성질을 갖습니다. flex : inline-block과 동일한 효과를 가지며 flex-direction을 이용해 정렬 -webkit-box : 크롬, 사파리 -webkit-line-clamp : 블록 컨테이너의 컨텐츠를 지정한 줄 수만큼 제한 -webkit-box-orient : visibility 요소의 화면 표시 여부를 지정 visible : 화면에 표시 hidden : 화면에 표시되지 않지만.. 2020. 12. 25.
NN CSS | 8. 구체성과 상속 구체성 같은 요소를 서로 다른 선택자로 선택할 수 있고 서로 다른 규칙을 갖고 있다면 어떤 규칙이 우선 적용되어야 하는지 정해진 규칙을 '구체성'이라고 한다. 구체성 값선택자를 얼마나 명시적으로 선언했느냐를 수치화한 것 0,0,0,0 0,1,0,0 : 선택자에 있는 모든 id 속성값 0,0,1,0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스 0,0,0,1 : 선택자에 있는 모든 요소, 가상 요소 importantimportant 키워드는 모든 구체성을 무시하고 우선권을 갖습니다. 선언 : 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 씁니다. 1p#page {color: red !important;}cs 상속 상속은 자손요소에까지 영향을 미치는 것을 말합니다. 하지만 자손이 부.. 2020. 12. 24.
NN CSS | 7. 조합자와 가상선택자 조합자 문서의 구조. 문맥이나 요소의 구조를 기반으로 선택자를 조합하는 것 상속관계 부모요소 — 부모 요소는 그 요소를 포함하는 상위 요소로 단 하나 뿐 의 부모요소 : , 의 부모요소 : 의 부모요소 : 의 부모요소 : 자식요소 — 부모 요소와 반대로 자식 요소는 여러개일 수 있습니다.형제요소 — , 자손선택자 자손 선택자는 선택자 사이 공백 1 div span {color: red;} cs 자식 선택자는 > (꺽쇠 기호) 삽입 1 div > p {color: red;} cs 인접 형제 선택자 : + 기호 삽입 1 div + p {color: red;} cs 가상선택자 Html 과 CSS는 정적인 언어이기 때문에 동적인 변화에 대처할 수가 없습니다. 자주 쓰이는 여러 패턴들에 대하여 미리 정의해 놓고 .. 2020. 12. 23.
NN CSS | 3. 선택자 요소 선택자 선택자는 복잡하고 다양한 요소들 사이에 내가 원하는 요소만 선택할 수 있게 해줍니다. 요소 선택자는 가장 기본이 되는 선택자 1h1 {color: red;}cs 그룹화쉼표를 통해 그룹화 가능합니다. 1 h1, h2, h3, h4, h5, h6 {color: red;}cs 전체선택자 : *(별표) 기호로 모든 요소 선택 1* {color: red;}cs Class 선택자 요소에 구애받지 않고 스타일 규칙을 적용 글로벌 속성이 class 속성 값을 넣고 class 선택자를 이용해 해당 요소에 스타일 규칙 적용 class 선택자는 맨 앞에 .(마침표) 추가 12.foo (font-size: 20px; } ... cs 다중클래스공백을 넣어 여러 개의 class값을 넣을 수 있다 123.foo (fo.. 2020. 12. 20.
NN HTML | 5. 콘텐츠 모델 해당 html 요소가 어떤 콘텐츠를 담고 있는가? 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙을 그룹화 시켜놓은 것이 콘텐츠 모델입니다. 콘텐츠 모델 Nothing 콘텐츠 모델요소가 공백 문자 포함 어떤 콘텐츠도 담고 있지 않은 경우 Nothing 으로 취급 콘텐츠의 종류1. Metadata 요소 — 콘텐츠의 동작을 설정하거나 다른 문서와의 관계를 설정. 내에서 정보 전달base : 문서 안의 모든 상대 URL이 사용할 기준 URL 지정link : css 호출 등meta : 페이지 설명. 즉 페이지 작성자, 문자세, 공유 정보 등noscript : 자바스크립트가 동작하지 않는 경우script : 자바스크립트style : css를 페이지 내에서 작성templatetitle : 페이지 제목.. 2020. 12. 19.
NN CSS | 4. 폰트 텍스트 관련 폰트 관련 font-familyfamily-name : 사용할 폰트의 이름generic-family : family-name으로 지정된 글꼴이 없을 경우 대체 폰트 font-size글꼴의 크기를 지정keyword : medium 기본값absolute sizerelative sizelength : px, em 등 고정수치initial :inherit : font-weight글꼴의 스타일normal : italic : 이태릭체oblique : 이태릭체보다 더 기울어진 각도lighter :number : font-style글글꼴의 형태를 변형하는 속성normal : small-caps : 소문자를 작은 대문자로 변형 font-variant글꼴의 굵기normal : 기본값 400bold : 굵게 700bolde.. 2020. 12. 16.
NN CSS | 2. 구문과 적용 방법 CSS 구문 CSS는 html 을 꾸며주는 표현용 언어입니다. 관리적인 차원에서 css의 필요성을 살펴 보겠습니다. h1 제목을 파란색으로 바꿔야 하는 경우가 생겼고 html문서가 많고 h1 태그가 많으면 하나하나 다 고치는데 많은 시간과 노력이 필요합니다. 이러한 디자인적인 부분을 css에 담아 관리 수정이 용이해집니다. css에서 h1을 찾아 한 줄만 추가한다며 모든 html의 모든 h1태그가 똑같아지기 때문이죠. css의 구조를 살펴보겠습니다.1234h1 { color: blue; font-size: 2em;}cs - 선택자 (selector) : h1 - 내용 (property) : color - 값 (value) : blue - 선언 12color: blue;font-size: 2em;cs - .. 2020. 12. 14.
NN HTML | 6. 인라인 프레임 (iframe) 속성 아이프레임은 HTML 문서에서 임의의 위치에 다른 HTML 문서를 보여주는 내부 프레임 태그입니다. 웹페이지 안에서 다른 페이지의 일정 부분만 보여주고 싶을 때, 웹 페이지를 또 만들기 보다는 적절하게 크기와 모양을 다듬어 보여주면 효율적이겠죠? 예를 들어 쇼핑몰이 여러 곳에 있다고 가정해 볼게요. 메인 쇼핑몰이 있고 이제 각종 스토어에 확장하려고 합니다. 그러면 각 스토어에 상품 상세페이지를 다 꾸며주려면 많은 시간과 노력이 필요합니다. 상세페이지에 iframe을 사용해 필요한 부분만 메인 쇼핑몰에서 불러온 다면 편합니다. 주의할 점은 iframe을 추가할 때 마다 header footer을 깐다고 해도 완전한 페이지에 가깝기 때문에 무겁습니다. 무겁다는건 로딩이 오래걸리고 컴퓨터 메모리 등을 더 잡아.. 2020. 12. 12.