02_STUDY/CSS4 생활코딩 WEB2 - CSS ② 기초 정리 2021-12-18 21:04:17 그리드 GRID ex) grid 파일 만들고 NAVIGATIO ARTICLE 입력 는 무색 무취의 태그, division의 약자(분할,분배) NAVIGATION ARTICLE 용도가 없고 디자인의 용도로만 쓰는 태그 Block level element기에 화면 전체 사용 >>>줄바꿈 되어버림 같은 목적의 태그로는 이 있음, 인라인 엘리먼트 그리드를 위해서는 부피를 먼저 알아보기 태그를 지워낸 안의 코드만 복사해서 붙여넣기 2. 원래 사용하고 있던 각 페이지에 태그 지우기 3. 를 이용해서 웹브라우저한테 명령 2023. 4. 11. 생활코딩 WEB2 - CSS ① 기초 정리 2021-12-18 20:23:46 HTML - 전자문서 이용 a태그는 뒤에 있는 그 정보가 링크이다 라는 것을 설명하는 정보 h1태그는 저 문자가 이 웹 페이지에서 제목이다 하는 정보 디자인은 중요하지만 디자인 자체는 정보X 웹페이지 아름답게 디자인하는 2가지 방법 1. 쉬운 - HTML 문법에 태그 추가 2. 어렵지만 근본적인 해결책 - CSS 이 기호 사이 콘텐츠를 없는 셈 처리하는 것 a{ color: red; } 하나 바뀌면 모두 바뀜, 중복제거 속성 어디에, 누구에게 { } 선택자(SELECT) 필요 style= "color: red" 선택자 필요X, 스타일이란 속성은 그 값으로 반드시 css의 효가가 들어온다라는 약속 "color:red" html의 속성 { } 선택자 selector col.. 2023. 4. 11. 스크롤 설정하기 - overflow CSS로 스크롤 설정하기 스크롤 항상 보이기 body{ overflow: scroll; } 스크롤 숨기기 body{ overflow: hidden; } 자동 스크롤 body{ overflow: auto; } 콘텐츠가 블록에서 넘치지 않을 경우에는 visible, 콘텐츠가 블록을 넘는다면 데스크탑 브라우저에서는 scroll을 자동으로 적용해준다. 2023. 2. 11. CSS 변수 사용하기 자주 사용하는 색상이나, 넓이, 높이가 있다면, 그리고 전체적으로 변경해야 할 때, JS변수를 만들어서 사용하는 것처럼 CSS에서도 변수를 만들어서 사용할 수 있다. CSS 변수 설정하기 :root{ --font-size: 16px; --text-color: black; --base-bg-color: white; } CSS 변수는 최고 부모 위치인 root에서 지정을 하면 모든 자식 요소에서 접근이 가능하다. 선언할 때는 위의 예시처럼 변수명 앞에 --을 붙여서 사용하고 쓸 때는 아래와 같이 var를 붙여서 사용한다. CSS 변수 사용하기 .textBox{ font-size: var(--font-size); color: var(--text-color); } 정의된 것이 없다면 아래와 같이 기본값을 바로 .. 2023. 2. 11. 이전 1 다음
