공부하기/CSS 썸네일형 리스트형 CSS 연습해보기 - <div> 태그 https://opentutorials.org/course/3086/18322 그리드 - 생활코딩 그리드의 기본 사용법 강의 caniuse 홈페이지 소스코드 변경사항 그리드 써먹기 강의 소스코드 변경사항 Grid 기능의 호환성 https://caniuse.com/#feat=css-grid opentutorials.org division의 약자로서 단순히 디자인을 적용할 부분을 지정하는 용도로 사용하는 태그. 기본적으로 display : block; -> 해당 줄을 전부 사용한다. 따라서 줄바꿈이 된다. cf. 반대로 스팬 태그는 inline - display : inline block : inline : ex) - 글 태그의 부피감을 확인해보기 border : 5px solid gray; - grid 태.. CSS 그리드 개념 grid https://opentutorials.org/course/3086/18322 See the Pen gOazerx by PSK (@psklog) on CodePen. ref) 캔아이 유즈 : 2020/04/19 - [공부하기/Ref.] - 웹에서 사용할 수 있는 기능인가 체크 : 캔아이유즈 caniuse div : 2020/05/10 - [공부하기/CSS] - CSS 연습해보기div태그 박스모델에서 보면, 목록 과 본문이 옆으로 나란이 나열되어 있다. -> '그리드 grid'를 이용해서 만들어보자. 1. 그리드 속성 적용하기 - display : grid; 2. 각 컬럼 사이즈 지정해주기. - grid-template-columns: 150px 1fr; #grid{ display:grid; grid-te.. CSS 박스 모델 (box model) https://opentutorials.org/course/3086/18319 박스모델 - 생활코딩 CSS box model 소개 강의 소스코드 변경사항 박스 모델을 써먹기 강의 소스코드 변경사항 opentutorials.org 위 같은 모델 : 박스 모델 WEB HTML CSS JavaScript CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces writt.. CSS 선택자를 알아내는 방법 (selector) https://opentutorials.org/course/3086/18329 Selector ex quest) 링크: 검정색 방문한 적 있는 링크 : 회색 현재 링크(페이지) : 빨간색 태그에 클래스 지정하기 - 방문한 적있는 링크 : saw - 현재 패이지 : active visited page visited and current page - 클래스에 CSS 입히기 .클래스명{ 속성 } a{ color:black; text-decoration: none; } .saw{ color:gray; } .active{ color:red; } : 좋은 코드가 아님! 'active'가 앞에있다면 'saw' 클래스 속성을 따름 -> 'id' 지정하기! - 현재 페이지(active) 를 id로 지정하기 visited.. CSS 속성을 스스로 알아내기 https://opentutorials.org/course/3086/18328 CSS 속성을 스스로 알아내는 방법 - 생활코딩 강의 소스코드 변경사항 opentutorials.org Property : 프로퍼티, 속성에 대해 검색해보고 적용하는 방법을 알아보자. ( 물론 많이 사용해서 익숙해진 속성에 대해서는 바로 적용할 수 있지만, 모르는 속성이라면 쫄지 말고 검색해보면 된다!! ) - Quest ) 큰 제목을 더 크게 / 가운데 정렬해보기 - 대상 : 태그 - size : 45px - 가운데 정렬 1. 글씨 크기 검색 키워드 : css text size property ref) https://www.w3schools.com/css/css_font.asp 2. 가운데 정렬 키워드 : CSS text .. CSS 소개하기 CSS 등장 이전 한계 디자인 데이터 : 정보 데이터가 아님. 각각 태그에 적용 ->중복 : 많은 태그를 동시에 처리 할 때 큰일 CSS 등장 효과 태그 별 관리 : 같은 태그라면, 동시 적용 중복의 제거! 가독성 up. 같은 성질 별 관리 수월 효과적으로유지 보수 수월 CSS 기본 HTML 과 CSS는 완전히 다른 언어이기 때문에, 웹 브라우져로 부터 구분 할 수 있도록 해줘야 합니다. - - Selector : 선택자 - Declaration : 선언, 효과 - Property : 속성 - Property Value : 속성 값 - HTML 속성 : style = " " CSS 이전 1 다음
