태그에는 무엇이 들어가야 할까? -사이트의 제목, 설명, 부가 정보, 기술적 내용(이 사이트는 주로 모바일용인지) :한글, 일본어, 중국어가 포함된 페이지라면 utf-8이라는 값으로 문자 인코딩을 추가해줘야 함 : 디바이스의 가로 크기가 곧 웹페이지의 가로와 같다는 의미. width=device=width를 추가하지 않으면 데스크탑 버전의 웹 페이지가 축소되어 보이는 현상이 나타남.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

HTML 에 CSS를 반영하게 하는 3가지 방법

1.inline style
--
-html 파일에서 tag의 속성으로 넣는 방법
ex.

i am css

2.style 태그
--
-html 파일에서 직접 style태그를 이용하는 방법
ex.

3.css 파일에 작성-html과 css연결해서 css파일에 쓰는 방법.
--
-1,2는 html에 직접 디자인 했다면 3번은 html과 분리. css파일에 작성.
그러나 어느 css파일이 쓰였는지 브라우저에 알려야 하므로 링크 태그 추가.

1.link------link태그로 css파일을 링크
2.href-----href속성에 css파일 경로를 작성
3.rel-----rel은 html file 과 css file과의 관계를 설명하는 속성입니다.css파일을 링크할 땐 항상 "sytlesheet"을 대입
3.type-----link태그로 연결하는 파일이 어떤 것인지 알려줌. 여기서 css file을 연결하므로 type은 항상"text/css" 이다.

앞으로 모든 css파일 시작에 *{ box-sizing:border-box;}라는 프로퍼티를 필수적으로 넣어야 한다.

css 작성법

---

selector 에는
--
1.tag
2.id 로부터 오는 #
3.class로부터 오는 .
등등이 올 수 있다.

---

! 글자 밑에 밑줄을 그어주고 싶다면
--

1.html 에서 태그를 사용해도 되고
2. css에서 text-decoration:underline; 을 사용해도 된다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

font에 대하여.

1.font-family:1, 2, 3, 4
--

1이 브라우저에서 지원이 안되면 2가 뜨고.
2도 지원이 안되면 3 이뜨고
3도 지원이 안되면 4가 뜬다.

*serif라는 font style은 모든 브라우저에서 지원된다.(4에 넣으면 됨)

---

2.font-size
--

"px", "em", "pt" 등 다양한 단위를 사용한다.
주로 css에서 font-size: 30px; 와 같이 값을 준다.

---

3.font-weight
--

font-weight은 글씨 두께를 조절하는 prorperty로
normal, bold, 100, 200, ...., 900까지 넣을 수 있다.
normal=400
bold=700
+보통은 숫자로 값을 주기보단 normal 과 bold로 구분한다.

---

4.color
--

글씨의 색을 바꿀 때 사용.
글씨를 여러가지 표현하는 방법이 있음.
1.hex----#eb4639;
2.rgb----rgb(235, 70, 57);
3.hsl----hsl(4, 82%, 57%)

+color picker 구글 검색으로 찾아볼 수도

---

5.텍스트 정렬
--

왼쪽 정렬, 가운데 정렬, 오른쪽 정렬이 있다
text-align: left or center or right;

---

6.indent(들여쓰기)
--
text-indent:50px;
하면 왼쪽에 들여쓰기 공간이 생긴다. 들여쓰기나 밑에 7번 스페이스 바 기능을 쓰면 된다.

---

7.  스페이스 바 기능
--
위에 애들은 css에 쓰는 기능이 대부분 이었는데
여기   스페이스 바 기능은

여기에 쓰도록 한다.

html과 css에는 아무리 엔터치고 스페이스 바 쳐도 실제로 적용되지 않기 때문에 이런 것을 쓴다. 8.margin, border, padding -- https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwjXn9_lv_XmAhWkF6YKHavFCrgQjRx6BAgBEAQ&url=https%3A%2F%2Fvelog.io%2F%40yaeji120%2F%25EC%2597%25AC%25EB%25B0%25B1-alk4c3qq09&psig=AOvVaw3xAMCxnp2X5Ivr7jVaA3A0&ust=1578624217451778  +맨 가운데, 청록색은 '요소'이다. margin, padding모두 4면을 가지고 있지만 한 값만 줄거라면 { margin: 5px; } 만 줘도 4 면에 모두 동작한다. 따로 쓸 경우 { margin-top: 50px; margin-right: 50px; margin-bottom: 50px; margin-left: 50px; } 이라고 주면 된다. !!margin은 저렇게 각각의 값을 줄 경우 위-오른쪽-아래-왼 순으로 써야한다.(시계방향) --- -border: 두께, 선 스타일, 선색깔; ----- 순서대로 써줘야 한다. 또한 top, right, bottom, left 모두 다른 선 스타일을 지정할 수 있다. ex border: 5px, solid, blue; +개발자들이 밑줄을 칠 때 underline도 쓰지만 border을 주로 이용한다. Selector 의 우선순위 및 점수로 매겨보기 ---------- inline styling= 1000점 id= 100점 class= 10점 tag= 1점 위에 점수로 매긴 것을 보아하니 class로 묶여있는 a,b,c,d 가 있다고 치면 b에게 id가 있을 시 class보다 id를 우선적으로 동작 시킬 수 있다. class와 id를 다 제치고 동작시키고 싶다면, inline styling을 하면 된다. 근데 또 점수로 우선순위가 나눠질 수 있는 경우가 있다. 예를 들어 가 있다고 했을 때 1. .bigtitle.title {}----이란 class가 bigtitle이면서 title이라는 의미로 100+100=200 그리고 class와 class 사이에 띄어쓰기가 없다. 2. .bigtitle .title {}---이란 부모 bigtitle 이면서 자식의 title이라는 의미로 h2가 작동한다. 3. div .bigtitle {} ---는 부모 태그 div안에 자식들 중에 bigtitle이라는 class를 가진 친구한테 동작하는 것이다. **이미지(html)과 백그라운드이미지(css)에 대하여 ------ 1.html 파일에 img형태로 넣으면 프린트를 해도 나온다. +쇼핑 홈페이지 같은 경우 물건의 이미지를 html에 img로 넣어야 구글같은 곳에 검색했을 때 뜰 수 있다. 2.css 파일에 백그라운드 이미지로 넣으면 프린트 할 때 나오지 않는다. 9.상속 inheritance, 그룹 grouping -- 상속 inheritance = css가 가진 특성으로서 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미. 태그에 스타일을 하면 그 안에 있는 p태그 또는 다른 것들도 사이즈나 컬러에 상속된다. 물론 개인이 특별히 가진 스타일은 상속을 무시한다! 그룹 grouping = 여러개의 태그, 클래스에 같은 효과를 주고싶다면 모두 묶을 수도 있다. css 파일에 p, span, .javascript { font-size;20px; } p, span은 태그이고 .javascript는 class 이지만 모두 grouping하여 동작시킬 수 있다..! 10.이미지 --- 1. 이미지 사이즈를 조절해보자. img 태그의 속성에는 width와 height가 있지만 유지보수가 좋은 코딩을 위해 css에 하는 것이 좋은 습관일 듯 하다. img { width: 150px; } 이미지에 width 즉 가로만 지정했는데도 세로값은 알아서 알맞게 줄어들었다. 즉, 가로든 세로든 하나만 지정해도 나머지는 알아서 같은 비율로 줄어든다. 2.background-img로 이미지 넣기. html에 css에 .bg-img { background-color:yellow; background-image: url("httl://.....") } 이렇게 입력하는 것 아더, 하지만, div는 block 요소이기 때문에 화면의 가로가 전체적으로 퍼져있다.--또 다른 block-> p, header, h1... 이것을 변경하기 위해 우리는 가로세로값을 주면 된다. ----- 가로세로값을 지정해주지 않으면 div에 내부요소(글씨=백그라운드 이미지 라고 적은 것)가 없다면 아무것도 출력되지 않는다 ---- .bg-img { background-color:yellow; background-image: url ("...") height:300px; width:300px; background-size:100%; } 라고 값을 지정해주면 div내부요소가 없어도 이미지가 이 안에 잘 들어가있고 잘 나타나 있다. 11.Block & Inline --- 우선, block 과 inline이라는 성질을 각각 가지고 있더라도 css로 변화시킬 수 있다. 대부분의 html elememt는 block요소 이다.

등등 모두 block요소 이다. block 요소란? --- 이 요소 바로 옆에 다른 요소를 붙일 수 없다는 뜻 이다. 항상 새로운 줄에서 시작하여 좌우로 최대한 늘어나기 때문이다. inline --- block과 다르게 한 줄에 바로 옆에 서로다른 요소의 내부요소끼리 위치할 수 있다는 뜻 이다. 대표적으로 이 있다. 자. 아까 말한 block과 inline 성질을 바꿀 수 있는 방법에 대해 보자. block-->inline 을 갖도록 하는 css property에는 display와 float이 있습니다. .css selector { display: inline-block; } inline--->block 성질 갖도록 하는 것 .block-span { display: block; } 여기에는 이렇게 간단하게 썼지만 이 두 프로퍼티를 이용했을 때 또 해야하는 것들이 있을 것이다. 더 공부해야지 이부분 ㅜ... none --

          .hide {
            display: none;
          }
          

이라는 값을 주면, 해당 요소는 화면에서 보이지 않는다.

안보이는데 작성하는 이유는?

         우리가 검색창에 텍스트를 입력하는 순간, 아래에 관련 목록이 뜨는 것을 볼 수가 있다.

원래는 해당 영역이 display:none;으로 보이지 않다가

텍스트를 입력하는 순간

JavaScript가 검색 목록 요소에 다름 클래스로 교체한다.

그 새로운 클래스에는 display: block;이라는 값이 있었을 거다.

요소에 display: none <->block 로 있다가 없다가 하면서
요소를 보이게/안보이게 할 수 있는 것입니다.

12.margin auto

---

레이아웃에 대하여.
block요소 일 때 width를 주면 더 이상 늘어나지 않게 됐었지.

이 때, margin에 auto로 설정하면 가로 중앙에 오게 할 수 있다.

          .center {
            margin:20px auto;
          }
          
          p{
            width:100px;
            margin-left:auto;
            margin-right:auto;
          }

          

이런 예시들이 있겠지.. 두 가지는 따로..!!

13.list 꾸미기

ul을 쓰면 자동으로 목록 앞에 검정 원이 있다.
이것을 바꿔보자.

          ul {
            list-style:none;//검정 원 없애기
            border-left: 3px solid black; // 목록 옆에 일자로 줄 만들기
            padding: 0 0 0 15px; // 일자 막대와 목록 사이 조금 벌리기
        
          }
          
          li {
            padding-bottom: 10px; //목록끼리의 간격 벌리기
          }
          
          

**위 처럼 botom에 여백을 주었더니 마지막 목록인 search밑에도 여백이 생겼다.
목록의 마지막 것만 padding-bottom을 빼고 싶다면
css selector표기하는 방법 중에 해당 태그의 첫 번째 순서, 마지막 순서, 홀수(odd) , 짝수 (even)
알려주는게 있다

    홀수 사용한다고 치면
          
          li:nth-child(odd) {
            background:red;
          }
          

라고 치면 된다.

13.table(표)

          +목록을 표현했을 때 항상 <ul> 또는 <ol> 과 <li>의 조합이 필요했듯이,

테이블을 표현하기 위해 여러 태그들의 조합이 필요합니다.

등이 있다. ​ 테이블은 항상 로 감싸져 있다. 태그 내에 행, 열을 만드는 것. ​한 행 시작= =====table row 각각의 셀은 태그 내에 를 쓰면 된다. ​ 이렇게....... 가로로 병합된건 (열 병합)colspan -- 로 해서 요로코롬 하면 된다!!!! 병합할 칸 갯수에 맞춰 "" 안에 숫자를 넣어준다. 여기까지.....​ 태그를 사용한다.=====table data ​ <tr> <td>Row1, column1</td> <td>Row2, column2</td> </tr> <tr> <td>Row2, column2</td> <td>Row2, column2</td> </tr> 이렇게 선 없는 표 완성. !!선은 css에서 추가 =table heading의 줄임말로 가운데 정렬 효과와 글씨가 두꺼워 짐을 확인할 수 있음 ​ "열"에 제목 추가하기 "행" 에 제목 추가하기 ​ 테이블 선 추가하기 .border-table th, .border-table td { border: 1px solid black; } 가로, 세로 병합되어있는거 ​ 이렇게@ 나 태그에 colspan, rowspan이라는 속성. attribute를 추가해서 구현할 수 있다.  자세하게 보자면 ,,, 처럼 세로로 병합되는것은 (행 병합)rowspan -- 밑에것도 내거다~~라는 의미로 맨 위에 칸에 html실습 colspan="2">수업 없습니다.