1. CSS
HTML 단순한 구조를 보기 쉽게, 사용자에 맞게 시각화하는 언어
HTML 파일예 CSS파일 추가
<link rel=”stylesheet” href=”파일명.css”>2. id 접근방법
id : 하나의 문서에서 한 요소에만 사용가능
id가 있는 요소 선택 : #요소명
html 파일내부 : <h1 id=”요소명”>HTML</h1>
CSS 파일내부 : #요소명{color:#fff;}3. class 접근방법
class : 동일한 스타일을 여러 엘리먼트에 적용가능
class 요소 선택 : .요소명
html 파일내부 : <h1 class=”요소명”>......</h1>
CSS 파일내부 : .요소명{margin-top:10px;}4. css 기본 키워드
색상 : 색상의 이름 또는 16진수 RGB값 사용
color : red; — 글자색
background-color : #000; — 배경색
border-color : #ddd; — 테두리 색글꼴 : 폰트이름으로 설정가능하며 저장된 폰트가 없을 경우
2, 3으로 순차적으로 적용되며 google fonts를 통해 웹 다운도 가능
font-family = “1”, “2”, “3”글자크기
절대단위 : px, pt
상대단위 : %, em, rem, ch, vm, vh등
rem : 일반적으로 많이 사용(root 글자크기 기준으로 설정)
font-size:24px;글자굵기 : font-weight
밑줄 : text-decoration
자간(글자간격) : letter-spacing
행간(줄간격) : line-height
정렬 : text-align : left, right, center, justify(양쪽정렬)
span
글자만큼 영역을 가짐, 그러나 height를 갖기 위해선
block 박스화 시키는 css 구문이 필요!
display : inline-block;
block : 줄바꿈 O, 너비 100%, height 사용 O
inline-block : 줄바꿈 X, 너비는 글자가 차지하는 만큼, height사용 O
inline : 줄바꿈 X, 너비는 글자가 차지하는 만큼, height사용 Xborder(테두리)
border-style : dotted, dashed solid ………
border-radius(원형테두리) : 위, 오른쪽, 아래, 왼쪽 (시계방향으로 값 설정가능)여백
margin(바깥여백)
padding(안쪽여백)
5. 정리
코드스테이츠의 첫주가 이렇게 흘렀다.
페어와 함께 깃헙을 통한 과제 제출을 연습했다.
조금 적응할까 싶었더니 급격히 난이도가 올라 당황했지만 페어와 함께 하나씩 해결해 가고 있다. 깃헙의 1일 1커밋의 의미를 조금이해가 될 것 같다.
단순 계산기도 이렇게 생각해야할게 많았나 싶은 오늘이었다.
내일은 계산기의 어드밴스, 나이트메어까지 잘 해낼 수 있을까.?!
