CSS가 등장한 이유
- html 이 정보에 전념하기 위해 <style> 태그를 통해 빼내어 주는 것
- css를 통해 웹페이지를 디자인하는 것이 html 을 사용하는 것 보다 효율적
문법
-태그 (선택자, 선언, 속성, 값)
-스타일 <style> - a (모든 글자) ex) <style> a {color:black;} </style> 모든 글자는 검정
> a 라고 써놓은것 셀렉션(선택자) 라함. { } 안의 뜻 디컬러레이션(선언). 세미콜론으로 하나의 명령어를 구분한다.
> color < property 프로퍼티라 함 속성. red <value 가치, 값
> 선택자를 h1 으로 지정할 수도 있음.
> 인터넷 검색을 통해 프로퍼티와 값 등을 알아내어 사용할수 있음 ) ex)css text center property 이런식으로
-속성
- 스타일 style="color:red" - 속성에 스타일이 들어가면 color:red만 css로 인식하여 읽는다. 나머지는 style
- text-decoration : underline; - 속성, 선언으로 밑줄을 그어줌 ( 앵커 안으로 들어가도 됨)
- text-align : center; - 속성, 글자를 중심으로 옮김.
추가 설명 - 선택자
- html 로 입력된 선택자를 지정할 수 있도록 class 라는 프로퍼티를 이용하여 선택자에 지정될 수 있게함
> <a class="saw"> NEW </a> 뉴 라는 단어를 소우 라는 클래스에 넣게된다
.만약 class="saw active" 라고 작성하면 클래스가 총 2개 saw 와 active에 속하게 된다.
> <style> .saw { color:gray;} </style> 를 통해 saw 클래스에 속한 글자를 회색으로 바꿀 수 있다. 호출을 '.'으로 함
> 강한순서 : 1.id > class > tag 순으로 강하며 그다음으로 . 2. 가장 1열에 가까운 스타일 명령을 따른다
- class 가 아닌 다른 프로퍼티 'id' 라는 프로퍼티를 지정할 수 있다.(단 1번가능) 선택자 호출은 '#'을 앞에 붙임
ex) #saw
- ',' 를 사용하면 여러가지를 동시에 지정할 수 있음 ex) h1, a - 앵커와 h1 태그가 달린 엘리멘트에 대해 적용
- #grid ol - id가 grid인 부모 아래에 있는 ol 오더리스트 를 선택자로 지정한다는 뜻
CSS 박스 모델
- 글자 자체의 박스를 설정해주는 것 - 디자인 측면에서 매우 중요함
- 프로퍼티 text-decotration:none; - 텍스트 데코를 없앰(밑줄같은것들)
- 프로퍼티 border-****=""; 테두리, 사이즈,색깔, 속성 삽입 가능, 솔리드는 직선이라는 뜻
ex) border-width:5px; border-color:red; border-style:block; > border: 5px solid red; < 중복 시 생략 표현 가능
ex) border-left:1px solid gray; 좌측 테두리 1픽셀 회색 직선
- 프로퍼티 display:a; a에 inline - 글자 취급, block - 한 열을 차지하는 h1 블락사이즈를 가짐, none - 사라짐
- 프로퍼티 padding:**px; 글자와 보더(테두리) 사이(내부)에 간격이 생김 ex) padding-left 이런식으로 사용 가능
- 프로퍼티 margin:**px; 테두리 밖에 간격이 생김, left, right, top(?), bottom 등 사용 가능.
- 프로퍼티 width:**px; 를 사용하면 블락의 사이즈를 사용가능함. height - 높이
- 프로퍼티 grid-template-columns: 150px 1fr; 지정한 선택자의 열을 150px 과 남은 공간 1fr로 지정합니다.
> 만약 1fr 1fr 하면 총 2fr 중 1fr씩 가지므로 반반 갈림. 2fr 1fr 이면 2:1 의 비율로 공간을 가져감
> 그리고 블록 레벨 엘리먼트 이므로 가로(행)로 다 가져간다는걸 생각한다면 배치에 유의할 수 있음
- html 파일 f12를 통해 글자 크기,마진, 패딩 블락 사이즈 등을 확인 가능, 물론 폰트사이즈 포함
그리드
- dvi 를 스타일 display:grid; 로 설정하여 사용 grid-template-columns: **fr or **px 와 함께 사용하여 칸 나누기 가능
- <div> - 블록 레벨 엘리먼트 지정
> div 안에 div를 넣는것도 가능
> 한 행(컬럼)에 배치되게 하고 싶은 것들을 같은 div 에 넣으면 좋다
- <span> - 인라인 레벨 엘리먼트 지정
반응형 디자인
- 화면 사이즈에 따라서 형식(포맷)이 바뀌는 것
- 미디어 쿼리를 사용하여 수행.
- 스타일내에 속하는 코드 @media(min-width:880px) { div{display:none; }} 최소 880이상이면 화면이 보이지 않음
- 이를 응용하여 사용 반응형 디자인 사용 가능
CSS 재사용
- style.css 란 파일을 만들어 <style> </style> 를 대체하기
>ex) <link rel="stylesheet" href="style.css">
> 링크한다. reload 불러온다 속성값 stylesheet로. href 레퍼런스는 style.css
- 이렇게 하면 스타일 코딩을 불러오지 않고도 스타일(css)을 활용할 수 있다.
- 더 적은 트래픽을 사용하기 위해서는 웹페이지 안에 css코드를 넣는것이 유리했지만
> 캐쉬 파일을 저장하여 style.css 파일을 미리 저장함으로써 트래픽을 감소시키고 속도를 확보할 수 있었다.
> 따라서 style.css 파일을 활용하는것이 좋다(중복제거의 중요성)
CSS - Position 포지션 (https://www.youtube.com/watch?v=0kA0mBvumrg)
- postion 속성값 종류 : static, fixed, relative, absolute
> 스태틱 : left, top 와 같은 위치 지정은 전부 무시됨
> 릴레이티브 : 자기 부모를 기준으로 움직이거나 변함
> 앱솔루트 : 자기 부모들 중에서 스태틱이 아닌 태그의 위치를 참고(기준)으로 함 ex) 바디, 만약 부모중 릴레티브가 있다면 그 부모를 기준으로 설정함
> 픽스드 : 시조의 태그. 절대좌표라고 표현하겠음. 절대 좌표를 기준으로 설정됨. 부모의 영향을 받지 않는다.
댓글