12/08 css수업
화면을 꾸미면서 백엔드로 넘어가기
자바는 밀어붙인다고 되는 문제가 아닌데.. 어제배운 jsp, jstl, css, bootstrap은 밀어붙이면 해결되서 그냥 무대포로 수업함
html -> UI구성
css -> UI모양제어
JavaScript -> UI행위제, 사용자의 행위에 반응할수있음
style태그는 여러개 둬도 상관 없으나 보통 head다음에 메타태그 먼저 두고 그 다음 title 두고 그 다음 style을 두는게 일반적이다.
css는 html UI 컴포넌트의 모양을 제어할 때 사용하는 기술이다. (촌스럽게 html ui 모양 제어한다고 하지 말 것!)
css다룰 때는 vsc쓰면 문법이 잘 정리되어 있음. 보통은 css를 분리하니까 나중에 분리해서 편집할 때는 css쓰기
보통 html에서 margin을 주진 않는다.
특별한 경우 아니면 html에서 스타일을 지정하지 않는다. 보통 body내에서 style을 적용하게 된다.
-
div(division) 블록으로 나눠서 작업하고 싶을때.
-
하나의 태그가 두개 그룹에 적용될 때는 맨 마지막에 적용된 스타일이 최종 스타일이다.
-
대상자(태그명, 아이디, 분류명)의 상태를 지정하기 => 의사 실렉터(pseudo selector) => 가짜 실렉터
- 가짜라고 번역한건 적절치 못한 언어선택이였다. 그냥 상태 셀렉터라고 생각하면 된다.
모든 태그를 대상자로 설정할 수 있다.
- ```
- { border: 1px dotted red; margin: 3px; } ```
- 그렇지만 딱히 쓸 일은 없을 듯..
hover를 특히 많이 쓰는데 마우스 커서를 손 모양으로 바꾼다던가 할 때 많이 쓴다. JS를 쓰지 않고도 html에서 유저의 행동제어를 할 수 있는 태그 중 하나이다.
-
실렉터 자손태그 지정에서 조상과 자손은 직계여야한다. (직계존속)
실렉터(selector) II 특정 대상자 다음에 오는 태그를 지정하기 => 특정 대상자를 바로 위의 형으로 갖는 경우. => 문법 언니 + 다음동생대상자 {…}
img + ul {
border-width: 1px;
border-color: red;
border-style: dashed;
}
css적용
<img src='http://bitcamp.co.kr/resources/images/logo/head_logo.gif'>
<ul>
<li class="c1">교육안내</li>
<li class="c1">교육과정</li>
<li class="c2">수강신청</li>
<li class="c2">온라인상담</li>
<li class="c2">커뮤니티
<ol>
<li>게시판</li>
<li>QnA</li>
<li>방명록</li>
<li>FAQ</li>
</ol>
</li>
</ul>
img 다음에 오는 li태그에만 적용됨
특정 태그의 자손에 대해서 사용할 수 있는 셀렉터 문법이 있다. 직계/바로 다음 자매에 대해서 쓸 수 있는 태그가 있다고만 기억하면 됨!!
- css내에 id값은 중복되지 않아야한다. 하지만 현업 가선 보게될 수도 있는데, 그거 완전 용서받지 못할 코드이다. 그러지말자! id는 유일한 값이여야함!!
css에서 input type에 속성 적용하고 싶을 때
아래 예제는 type=text인 것만 지정해서 적용함.
input[type="text"] {
background-color: yellow;
}
value속성이 있는 애들만 적용하고 싶을 때
input[value] {
border: 3px solid red;
}
응용해서 이렇게도 적용 가능
input[value][type="text"] {
border: 3px solid red;
}
css에서 ""과 '' 상관없다. 둘다 아예 빼먹는 경우도 있으나 상관 없다!
css에서 특정 문자열로 시작하는 태그에 스타일 적용하기
input[name^="office"] { /* 속성의 값이 특정 문자열로 시작하는 경우*/
background-color: yellow;
}
input[name$="fax"] { /* 속성의 값이 특정 문자열로 끝나는 경우*/
color: red;
}
test03-04.html
focus : 키보드 값을 받는 ui 콤포넌트에 대해서 스타일을 걸 수 있다.
/* 키보드 입력을 받을 수 있는 상태 */
input:focus {
background-color: green;
}
button:focus {
background-color: red;
}
분류명보다 id로 지정하는것이 더 정밀하고, 스타일 순서를 우선한다!
.b1:focus {
background-color: blue;
color: yellow;
}
.bl로 id을 지정해준 것이 점수가 더 높기 때문에 스타일 출력이 더 우선해서 나옴.
위에서 버튼 색을 red로 지정했다 해도 여기서 정밀하게 blue라고 지정했기 때문에 ㅠ파란색 버튼이 나온다.
h1:first-child {
text-decoration: underline;
}
h1:last-child {
text-decoration: overline;
}
착각하기 쉬운 것 : h1이 자기가 소속된 조상 중에서 첫째여야 적용되는 태그이다. h1중에서 첫번째가 아님!
border
보더는 상속되는 태그가 아니다!! border, margin같은건 상속이 아니라서 일일이 지정해줘야함.
css 명세서
https://www.w3.org/TR/CSS2/colors.html#q14.0
https://www.w3schools.com/css/css_margin.asp
개발할때 명세서 잘 보고 하기
브라우저별로 지원하는 태그 잘 찾아보고 할 것.
6.4.3 Calculating a selector’s specificity
css 스타일 적용 순서(계산)
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>
계산방법을 알아야 어느 스타일이 먼저 적용되는지 알 수 있다.
스타일 적용 순서
=> specificity 값?
=> 실렉터의 우선 순위를 지정하기 위해 부여된 값
=> 한 태그에 같은 스타일이 중복 지정된 경우?
specificity 값을 계산하여 값이 높은 스타일이 적용된다.
스타일을 선언한 순서 보다 계산 값이 우선한다.
=> specificity 계산법
* : 0
태그 : 1
클래스,조건 : 10
아이디 : 100
인라인스타일 : 1000
CSS 작성 순서에 대한 권장!
=> 우선 순위에 낮은 스타일부터 작성하라!
=> 아래로 내려 갈수록 우선 순위가 높은 스타일을 작성하라.
=> 예)
* {…}
태그명 {…}
.클래스명 {…}
#아이디명 {…}
인라인 태그는 블록태그와 다르게 위아래 마진이 먹지 않음. 인라인 태그를 블록처럼 다루고 싶다면 display: inline-block을 해준다!
div에서 위아래는 겹친다. 즉 마진끼리 합쳐지기 때문에 각자 마진을 10px 줬다해도 20px이 아니라 합쳐져서 10px이 나온다.
width height의 너비는 기본이 contents이다.
테두리두께가 변하든 말든 contents너비는 고정인것이다. (contents를 출력할 수 있는 너비와 높이)
태그 너비와 높이 content-box(기본) => width = 콘텐츠 너비 => height = 콘텐츠 높이 border-box => width = 콘텐츠너비 + 좌,우 패딩너비 + 좌,우 테두리너비 + 좌,우 마진너비 => height = 콘텐츠높이 + 좌,우 패딩높이 + 좌,우 테두리높이+ 좌,우 마진높이
test05_4.html 잘 모르겠음..다시 보기
sans : 명조 : 바탕체, 궁서체
sans-serif 고딕체 : 맑은고딕, 돋움체, 굴림체
sans는 not이란 뜻임
폰트
폰트의 사이즈 기준은 높이이다. 각 폰트스타일마다 너비는 다를 수 있어서 그걸 기준으로 하면 높이가 달라져 가독성이 좋지 않아진다. 보통 small을 많이 사용한다.
실무에서는 유지보수를 쉽게하기 위해 body태그에 설정한 기본 폰트 크기를 기준으로 비율로 지정한다. ex) 13em
=> 폰트 크기를 특정 숫자로 고정을 시키면 유지보수할 때 폰트의 크기를 변경하기가 번거로워진다. 모든 스타일을 다 변경해야 하기 때문이다. => 실전! 폰트는 자동으로 자식 태그에게 상속하는 스타일이기 때문에 body에서 font-family를 지정한다. 그리고, body에 폰트 크기를 지정한 다음, 나머지 태그에 대해서는 상대 크기를 지정한다. => font-size 상대 크기를 지정하는 문법 몇 배수인지 지정 => 2.4em %로 지정 => 240%
이모지 폰트를 이미지 대신 쓸 수 있다. 트위터가 대표적으로 아이콘을 폰트로 사용한다.
검색엔진에게는 검색친화적으로, 유저에게는 그림으로 예쁘게 하고싶다면?
-> 현대의 기법 : test07_11.html 참고
요약하자면 텍스트를 화면 밖으로 밀고 이미지만 띄우는 것임!
절대좌표를 쓰면 웹브라우저의 크기에 따라 유동적으로 UI를 조절할 수 없다.