[web]css
html과 css분리하기
html <head>부분에 ‘<link rel=”stylesheet” href=”css파일주소”/>’ 설정해주기. 다음 설정을 통해 css파일을 html파일로 불러올 수 있어서 html과 css를 따로 작성할 수 있다.
CSS Selectors
css selector란 style을 적용할 요소를 선택하는 표현형식이다.
- css파일에서 selector 작성법 selector { property: value; } 의 구성인데..
태그명 { property: value; } : 해당태그전체에 적용 #id명 { property: value; } : 해당id를 부여한 태그들에 적용 .class명 { property: value; } : 해당class를 부여한 태그들에 적용
id와 class차이 : id는 고유한 값으로 중복불가, class는 중복가능 즉, 묶고 싶을 때는 class, 고유하게 설정하고 싶을 때 id 사용한다
@@@
- { box-sizing: border-box; } 먼저 box-sizing이란 박스의 사이즈 계산 기준을 어떻게 잡을 것인가에 대한 설정이다. 만약 width=100px;이란 값을 주었을 때 누군가는 실제 박스자체를 100px로 잡을 수도 있고 누군가는 컨텐트영역을 100px로 잡고 여기에 paddding값, border값을 더해서 박스를 더크게 잡을 수도 있다. 즉, width를 설정할 때 실제 박스 크기로? 컨텐트영역 크기로? 할 것인지 등을 정하는 것이 box-sizing속성이다. -(default값이다)content-box : content-box를 설정(즉, 실제 박스크기는 content-box + padding + border 가 된다.) -border-box : 박스테두리를 설정 -initial : 기본값으로 설정 -inherit : 부모 요소 속성 상속
여기서 일반적으로 사람들이 box-sizing: border-box를 좋아해서 모든 요소에 이런 설정을 넣어주고 싶어한다. 그래서 생긴 것이 아래 코드다.
- { box-sizing: border-box; }
@@@ font-family = 폰트 종류 여러개.. 처음봤을 때 왜 폰트 종류를 여러개 설정하는지 궁금했다. 이는 예비용이다. 첫번째 폰트가 기본 폰트고, 만약 첫번째 폰트를 지원안하면 두번째 폰트, 두번째도 안되면.. 이런식이다.
@@@ @media : 반응형 레이아웃을 만들기 위한 css요소 html head부분에
ex) @media ( max-width: 768px ) { body { color: red; } } 웹브라우저 가로해상도가 768px이하가 되면, 글자색이 빨갛게 변한다
-
모바일 우선(mobile first) : 작은 가로폭부터 만들기, min-width사용 A @media ( min-width: 768px ) { B } @media ( min-width: 1024px ) { C } 기본A -> (화면점점커질수록) B -> C
-
데스크톱 우선(desktop first) : 큰 가로폭부터 만들기. max-width사용 A @media ( max-width: 1023px ) { B } @media ( max-width: 767px ) { C } 기본A -> (화면점점작아질수록)B -> C
@@@ flex 화면이 줄어들고 확장됨에 따라 요소도 같이 줄어들 것이냐 확장될 것이냐 설정
a태그안에 b태그가 있을 때 a{ display: -webkit-flex; // 사파리용 명령어 display: flex; //일반용 명령어 } b{ -webkit-flex: 1; -ms-flex: 1; flex: 1; } flex : 원래크기 상관없이 1은 같이 줄어들거나 확장될 것이다라는 설정. 0은 원래크기를 유지하기 위해 같이 줄어들거나 확장되지 않겠다는 뜻이다. flex말고 flex-grow, flex-shirnk, flex-basis 등을 써서 각 경우에 대한 것만 따로따로 설정도 가능하다
@@@ width 를 px로? %로? px : 고정됨. 브라우저가 커지든 작아지든 그냥 자기 크기 유지함 % : 브라우저에 대한 퍼센트로 브라우저가 변형되면 변형된 브라우저에 맞춰 퍼센트 자동적용. max-width : 최대크기를 정하고 이보다 브라우저 크기가 클 때는 고정px처럼 max-width값을 유지 하지만 브라우저를 줄여 최대크기 이하의 브라우저 크기가 되면 그에 맞춰 줄어듬. min-width : 최소크기를 정하고 이보다 브라우저 크기가 클 때는 브라우저에 맞춰 적용 브라우저가 줄어들어 최소크기 이하의 브라우저 크기가 되면 그때부터 고정px처럼 자동작용
즉 브라우저 크기가 max-width보다 커지면 max-width는 고정px처럼 늘어나지 않음 브라우저 크기가 min-width보다 작아지면 min-width는 고정px처럼 줄어들지 않음
@@@ height나 width %의미 %의 기준이 무엇일까? 아마 직접 실습해본 결과 현재 열려있는 브라우저 창의 크기를 기준으로 하는 것 같다. 예를 들어 지금 열려있는 브라우저 화면 가로가 200, 세로가 100 이라면 여기서 가로값으로 150%, 세로값으로 150%로 설정한다면 가로300, 세로150인 화면이 구성되고 가로200, 세로100인 브라우저에서는 모든 화면 확인이 불가하게 되어 화면을 다 보여주기 위해 브라우저상에 스크롤이 생길것이다.
@@@image img는 HTML 문서에 이미지를 삽입하는 태그이다. 주요 속성은 다음과 같다.
src : 이미지의 경로 alt : 이미지를 표시할 수 없을 때 출력할 내용 width : 이미지의 가로 크기 height : 이미지의 세로 크기 loading : 이미지 로딩 방식 (eager, lazy 로 브라우저 상에 나타나면 이미지를 불러오냐 아님 미리 다 불러와놓느냐)