[21.09.01] CSS

---

CSS 색상 표기 방법

1. 색상 이름을 사용 : red, green, blue, ...
2. rgb 함수 사용 : rgb(r, g, b) -> 0 ~ 255
3. 16진수 사용 : #RRGGBB -> 00 ~ FF

Box Model 스타일

• margin : 자기 자신과 외부 요소와의 간격
• border : 테두리선
• padding : 테두리와 요소 내부 컨텐츠와의 간격
• width/height : 컨텐츠의 가로/세로 길이

텍스트 정렬 스타일

• text-align : 텍스트 위치정렬
• text-decoration : 텍스트 꾸미기. underline(밑줄), overline(윗줄), line-through(가운데줄)
• text-indent : 텍스트 들여쓰기
• display : 요소의 형태 지정 inline, block, inline-block이 있다.

visited 스타일

  a:visited{
    color:green;
    text-decoration: none;
  }

링크를 클릭 시에 바뀌는 스타일을 지정

hover 스타일

a:hover{
    color: blue;
    background-color: transparent;
    text-decoration: underline;
  }

마우스를 해당 요소에 올리면 바뀌는 스타일 지정

하위요소에 css 적용

  <ul id="menu">
    <li>java</li>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
  </ul>

ul menu의 하위요소는 li

  #menu li{
    display: inline-block;
    border:1px solid block;
    width: 80px;
    text-align: center;
    background: darkgrey;
  }

상위요소와 하위요소 사이에 (공백)으로 연결한다!

여러개의 하위요소 중 하나 접근

• :nth-child(even) - 짝수번째 자식요소
• :nth-child(odd) - 홀수번째 자식요소
• :nth-child(x) - x번째 자식요소

현재 여러개의 하위요소 중 해당 위치에 있는 하위요소를 지칭한다.

semantic

문서구조

• <header> : 문서의 머리말, 회사 로고, 제목, 페이지 소개
• <nav> : 링크, 메뉴
• <section> : 문서의 주된 내용, 챕터
• <article> : 문서의 주된 기사, 절
• <aside> : 문서의 주된 내용과는 조금 거리가 있는 내용. 광고
• <footer> : 꼬릿말, 저작권, 회사 연락처 기타 등등

---

JavaScript

<script type="text/javascript"></script>

웹 페이지의 동적인 기능을 작성합니다. 조건과 반복이 가능한것을 프로그래밍언어라고 하는데 js만 그게 가능해서 html과 css는 보통 언어라고 안해요

HTML에서 자바스크립트를 쓰는 방법

1.script 태그안에서 자바스크립트 코드 작성

• head 태그 안에서
• body태그 안에서

2.자바스크립트 코드만을 포함한 .js 파일을 html 파일에서 링크하면 자바스크립트 코드가 있는위치에서 실행

자바스크립트 기능

1. HTML 요소의 내용(content)을 변경함
2. HTML 요소의 속성(attribute)을 변경함
3. HTML 요소의 스타일(CSS)을 변경함
4. 입력 양식(form)의 데이터를 체크함

자바와 자바스크립트의 차이점

• 자바스크립트는 클래스와 변수타입이 없다
• 자바스크립트에서 if문을 사용할때 true/false를 처리하는 방법이 다르다
  0, null, undefined는 false, 그외 나머지 값들은 전부 true로 처리한다.

document.write()

문자열. html에서 문장으로 인식하기 때문에 태그를 실행할 수 있어요

console.log()

콘솔창에 로그를 찍을 수 있어요. 사용자가 아닌 개발자가 확인하는 용도입니다.

function changeCSS() {
   console.log('changeCSS()호출');
}
~~~
<button onclick="changeCSS()">클릭해주세요</button>

버튼을 클릭하면 함수가 실행되어 콘솔창에 로그가 찍히게 했습니다. onclick속성에 자바스크립트 함수명을 쓰면 버튼을 클릭시 함수이벤트가 실행됩니다.

var

변수의 타입이 없고 모든 변수를 var타입으로 정합니다.

document

현재 html 문서의 정보를 가진 객체

getElementById

var title=document.getElementById('title');

id속성값으로 요소를 찾는 함수. title이라는 id를 가진 요소의 정보를 가져옵니다.

변수명.style

요소의 스타일을 변경하기 위해서 .으로 style의 하위속성에 접근할 수 있어요.

• title.style.backgroundColor : 배경색 변경
• title.style.fontSize : 폰트사이즈 변경
• title.style.color : 색상 변경