210630 개발일지

1) 학습한 내용
HTML과 CSS 작업
동시보는법: view-layout-columns2
github링크

1. css는 {}중괄호 안에 작성

   header {
       color: red;
   }

   color는 속성, red는 속성값, 항상 ; 세미콜론으로 마무리

2. h1 태그안에 스타일 넣어서 적용
   -1,2의 단점 : 분량이 많을시 가독성이 떨어짐, 유지보수 어려워짐

3. 링크태그 방식으로 실무에 많이 사용

   <link rel="stylesheet" type="text/css" href="style.css">

   stylesheet : 링크로 연결되는 파일의 타입
   text/css : 연동되는 파일의 글자는 css타입
   href : 연동 될 파일 경로 입력

   -css주석 처리는 /* */로 처리

• <부모태그, 자식태그, 형제관계>

< a >는 태생적으로 블루컬러를 가지고 있어서 사용시 부모 영향 받지 않음.
부모 유전을 자식이 모두 받는 것도 아님
어느집 자식인지 표기하면 그곳만 색상 변경 가능

-타입선택자
-아이디선택자 : 고유의 이름붙여서 이름으로 색상변경 속성사용자, #기호 사용

-클래스선택자 : .기호로 사용 클래스 속성 여러별명 지을수 있음,동일한 클래스 명을 여기저기서 사용가능,같은 태그일때 고유의 값을 줘서 개별로 속성 주는것

ex) <ul>
        <li></li>
        <li></li>
    </ul>

타입안에 들어있는 속성값 으로 활용 가능

언제 id,class사용?
아이디는 이름 하나만 가질수 있음, 한개의 문서에 하나만 존재해야함
클래스는 위의 ex처럼 li가 여러 개 일 때 개별로 이름 정해서 CSS속성 줄때

• 캐스캐딩: 동일한 선택자를 성만 변경해서 줬을때 최근에 값을 활용하는것,
  태그와 클래스 사용시 클래스 값이 높아 그 색으로 반영됨

ex) #intro div h1 {
        color: green;
    }

    #intro h1 {
        color: blue;
    }

    header h1 {
        color: red;
    }

    #intro .container h1 {
        color: pink;
    }
여기선 pink로 나타나게 됨(캐스캐딩)

style속성 > id > class > tag

클래스와 아이디는 아이디가 더 높아서 아이디 색상으로 변경됨,
아이디와 스타일시 스타일이 더 높음.
디테일하게 작성할수록 캐스캐딩이 됨
언제사용? 원본코드를 유지한 상태에서 새로운 css추가, 디자인 덮어씌울때 캐스캐딩 사용

• width, heiht px는 고정, %는 가변적으로 변화
  부모 태그 값으로 값이 영향 받음
  width, height 안에 min-width: ;, max-width: ;

  border: solid 10px red;

  border(테두리): solid(선의종류) 10px(선의굵기) red(선색상) 순서 상관없음

• font-family: Arial, Times, sans-serif;(sans-serif:모든 브라우저에서 사용가능함으로 마무리 항상 넣어주기)
  여러 폰트 넣어서, 가능한 서체가 나타남

• font-weight 글자크기

• text-decoration: ;글자 밑줄

• line-through:글자가운데 줄

• text-decoration: none; : < a >태그시 밑줄 없애고 싶을때 사용

• text-align: right/center/left; : 글씨정렬

• 글자 범위확인은 background-color: pink; 를 넣어서 확인 가능

• <ul>-<li>이용시 생기는 '메뉴점'은 ul { list-style: none;} 로 지울수 있음

• opacity는 투명도, 1에 가까워 질수록 보임

• background-repeat: no-repeat/repeat-x/repeat-y; : 이미지 반복x/x축만/y축만

• background-position: left/right/top/bottom/cente/right bottom 등; : 공간안에 이미지 위치조정

• 백그라운드 이미지는, 액자틀에 사진을 끼워 넣는거라 잘릴수 있음
  이미지 태그는, 비율이 깨질지언정 다 나타남+정보를 가진 이미지 넣을때 사용(네이버, 다음 메인 왼쪽 상단 홈 이미지)

2) 학습내용 중 어려웠던 점
CSS의 세세한 활용법

3) 해결방법
여러번 보고 사용하면서 익숙해 져야 할 것 같다.

4) 학습소감
설정한 컬러가 생기고 디자인이 가능해지는게 흥미롭다.