728x90 Web developer/[CSS]5 [CSS_05][WEB] css 코드의 재사용 css문법만 style.css파일로 저장 태그 해당 문서와 외부 소스 사이의 관계를 정의할 때 사용합니다. 이 요소는 요소 내부에만 위치합니다. 주로 외부 스타일 시트를 연결할 때 사용합니다. rel은 필수 속성으로 현재 문서와 외부 리소스 사이의 연관 관계를 명시합니다. href는 링크될 URL 2023. 2. 13. [CSS_04][WEB] 반응형 웹 - 미디어 쿼리 반응형 웹 화면의 크기에 따라서 웹 페이지에 각 요소들의 크기가 자동적으로 재조정 됩니다. 미디어 쿼리 문법 media query screen width > 800px → @media(min-width:800px) { } screen width < 800px → @media(max-width:800px) { } @media only screen and (min-width: 300px) { logic } only | not 키워드 : only는 뒤의 조건만, not은 뒤의 조건을 제외한 조건 screen키워드 : 미디어 타입을 말하며 all, screen(컴퓨터와 모바일), print(인쇄용도) 가 주로 쓰이고 더 많은 타입이 존재합니다. 미디어 쿼리 속성은 논리 연산자를 사용하지 않으며 속성 명 앞에 m.. 2023. 2. 13. [CSS_03][WEB] 그리드 ● 태그 : 컨텐츠 분할 요소 division으로 영역을 나누는데 사용하는 태그 웹사이트의 레이아웃을 만들 때 주로 사용합니다. HTML 문서에서 특정 영역이나 구획을 정의하려고 할 때 사용합니다. HTML 요소들을 하나로 묶어주어 CSS나 javascript로 특정 작업을 수행하기 위한 일종의 컨테이너(container)로 자주 사용합니다. block level 요소로 혼자 한 줄 차지 ● 태그 텍스트의 특정 부분을 묶는 데 자주 사용합니다. inline 요소 ● 그리드 만들기 fr은 자동 화면 조절 단위 ● 웹 브라우저의 기술 채택 통계 서비스 https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 2023. 2. 12. [CSS_02][WEB] 박스 모델 태그의 부피 block level element : 화면 전체를 쓰는 태그 ex) h1 display: block; 으로 기능 부여 가능 inline element : content의 크기만큼 사용하는 태그 ex) a display: inline; 으로 기능 부여 가능 ● 테두리 border border-bottom ● 여백 (border안) padding ● 간격 (border밖) margin ● 너비 width 2023. 2. 12. [CSS_01][WEB] CSS 적용하기 웹 페이지를 디자인하는 것이 유지 보수가 쉽게 수행하도록 도와줍니다. html에 css 명령어로 해석하라는 명령어를 수행해야 합니다. html에 css를 삽입하는 방법 ① 태그 삽입 ② style 속성을 사용 ● 기본 문법 ① 태그 삽입 방법 a {} 는 선택자 (Selector) color:red는 선언 (Declaration) color는 속성 (Property) red는 값 (Value) ; (세미콜론) 적용한 효과 사이의 구분자 대상을 선택하고, 그 대상을 어떻게 디자인할지 선언하는 방식입니다. ② 스타일 속성 삽입 적용 하고 싶은 태그 안에 style = "color:red" ▶ Property ● text-decoration 밑줄 효과 text-decoration: none; text-deco.. 2023. 2. 12. 이전 1 다음 728x90
