[211221] table과 CSS 기초

목차

1. 지난 수업에 대한 보충 설명

1. 파일명을 작성하는 법
2. html 작성을 줄이는 단축키
3. id란?

2. table

1. table의 기능
2. table을 만드는 법
3. (개인과제) 회원가입폼을 만들어보기

3. css

1. css의 기능
2. css의 적용방법
   1. 인라인 스타일
   2. 스타일 엘리먼트 사용
   3. 외부파일 생성
   4. css 살펴보기

 

---

1. 지난 수업에 대한 보충 설명

1-1. 파일명을 작성하는 법

• 영어로 작성하고 확장자'html'을 붙인다. ex) file.html
• 특수문자, 띄어쓰기 x, 예외특수문자 - _ 가능, ex) file_name.html

1-2. html을 작성할때 조금 더 편하게 하는 단축키

• !를 치고 엔터

1-3. id란?(어제 질문에 대한 답이므로 오늘거에 링크 연결해놓기)

• 특정 엘리먼트 안에서 고유한 값을 가지기 위해 선언하는 것.
• 그래서 같은 id 값이 2개 이상 존재하면 안된다.

---

2. table

1. table의 기능

• 표를 만드는 것. 게시판을 만들때 자주 사용하는 엘리먼트.
• <table>, <tr>, <td> 사용

2. table을 만드는법

• 행, row, 가로, 줄을 먼저 생성 :
• 열,colum,세로, 칸을 나중에 생성 :

3. (개인과제) 회원가입폼을 만들어보기

---

3. CSS

1. css의 기능

기존의 element의 속성을 바꿔주는 기능 ex) 블럭 속성을 인라인 속성으로 바꿈

그렇다면 element를 쓰는 이유는? html은 데이터를 넣을때 구분값을 명시할때 사용하는 것이다. 용도를 구분하자.

 

2. css의 적용방법

2-1. 인라인 스타일

html 속성값을 queryString

• key=value (속성=속성값, 속성을 부여할때 =을 사용)
• ex) type="text"

css는 object 형태의 문법 사용 (잠깐만 쓰는 개념. 정확히 object는 아님)

• key:value; (스타일을 넣을때 :을 사용)
• ex) background:blue; font-size:10px;
• 끝마칠때 세미콜론(;)을 사용
  • 가독성을 위해
  • 컴퓨터가 이해할 수 있는 문법

 

2-2. style 엘리먼트 사용 (선택자 사용방법)

• 내용을 저장하는 영역인 head 안에 작성
• 선택자를 이용해 선택하는 방법
  • id의 경우
    • 1. 먼저, body 태그 안에서 id가 title이란 element를 선택할 줄 알아야 함.
    • 2. 컴퓨터적인 사고방식으로 어떻게 하는지 알아야 함. (선택자)

    • #title{
      	font-size:12px; background:yellow;
          }​

       
      • #은 찾습니다. (선택자)
      • 무엇을? title을.
      • 왜? {} 안에 있는 코드를 실행시키려고.
      • {}을 쓰는 이유? 어떤 선택자를 기준으로 css를 적용시키는지 구분하기 위해서.
    • class의 경우

      • .title{
                    font-size:12px;
                }

        • .은 class를 찾는 선택자.
  • 엘리먼트에 직접 효과를 주는 경우

    • .menu2 > li{
      	display:inline;
               }

    • class 명으로 menu1과 menu2 이름을 가진 ul 이 존재할때, menu2 ul안에 있는 li 전체에 적용

 

2-3. 외부파일 생성 (주로 사용하는 방법)

1. index.css 새 파일 생성
2. index.html의 head 엘리먼트에 link 태그 생성

<link href="파일경로" type="text/css" rel="stylesheet">

• link 태그의 3가지 속성값
  • href : 파일의 경로 ex) ./index.css
  • type : 파일의 형태
  • rel : stylesheet임을 명시
  • (queryString의 형태로 이루어지는 css 그 중의 하나의 모습이 key=value)
• 절대경로
  • ex) C:\User\Documents\workspace\html\211221
  • 처음부터 끝까지 모든 경로를 작성해놓음
  • 구분값 \
  • 리눅스, mac은 /
• 상대경로
  • .\css\index.css
  • 실행하는 파일로부터의 경로를 작성해놓음
  • . : 현재 자기 기준으로부터 ex) .\파일명
  • .. : 이전 폴더로 이동
• 실습방법
  • cmd를 선택해 명령 프롬포트를 실행
  • cd , : 현재 디렉토리가 나옴
  • cd : 이동할 경로를 치면 이동 가능
  • dir : 생성된 파일이 나옴

 

2-4. CSS를 살펴보기

우선순위

가장 최우선은 inline 스타일. 스타일을 2개를 주면 적용을 되지만 inline 스타일이 다 뒤집어 씌운다.

가장 아래에 있는 코드가 우선시 된다. 위에서부터 실행이 되고 점점 뒤집어 씌우니까. (절차지향적 성향)

 

선택자 *

모든 엘리먼트를 뜻함

 

margin

• 엘리먼트간에 보통 빈공간이 존재하지 않음. 여백을 두고싶을때 사용하는 것
• margin-top, bottom, left, right : 10px;
• margin : 15px 0 15px 0; (상 우 하 좌 : 시계방향)
• margin : 15px 0; (상하, 좌우)
• margin : 0; (모든 방향)

padding

• 안에 있는 요소의 위치를 바꿀때 주로 사용
• 해당 방향으로 박스 크기값이 늘어난다. 높이20+상하패딩10=총40
• 늘어나는 값을 막기 위해서 box-sizing: border-box; 를 사용

width : 너비

height : 높이

color : 색 넣기. html에서 넣을 수 있는 색은 아래 링크에서 알 수 있다.

https://www.w3schools.com/colors/colors_picker.asp

 

---

배운것 안에서 가능한 만들어보는 연습문제

 

(질문&답변)

• 같은 속성을 가진 것들을 일일히 치는것은 시간 낭비. 그렇다고 id를 여러번 쓸 수도 없고.
  • 질문했을때 교수님이 그럴때는 class를 사용해서 같은 속성을 처리하는것이 좋다고 하심.
  • 다음 강의에서 진행될 예정

• 중간에 있는 칸막이들은 table로 작성해서 css로 조절하는건가
  
  • table이 아니라 더 쉽게 처리할 수 있는 방법이 있다 하심. 나중에 진도나가면서 알 수 있나봄. 패스