2023.03.02css ,input 그리고 display 속성

오늘 배운 영역을 크게 나누면 3가지이다.

1.css
2.input
3.display

1번 안에 나머지 2개가 포함되지만 css에서는 생성자에 대해 주로 알아보려 한다.

1.css

기존에 알고있던 css는 클래스 생성자만 알고 있었다. 태그,id로 하는 것은 잘 사용하지 않았기 때문이다. 하지만 너무 오만한 생각이었던 것 같다 ㅠ 바로 알아보자

1.클래스 선택자

가장 많이 쓰는 기능이다.

 .block7 {
        color: aqua;
      }

block7이란 클래스를 가진 태그의 색을 아쿠아로!
참고로 색을 정할 때 rgba(0,0,0,0)도 있다... 마지막 a는 투명도를 뜻한다.

2.id선택자

#test {
        color: red;
      }

test란 아이디를 가진 태그의 색을 빨간색으로!

3.모든태그

 * {
        color: salmon;
      }

모든 태그의 색을 연어로!

4.특정 태그

div {
        color: blueviolet;
      }

div태그의 색을 블루바이올렛으로!
참고로 두개 적용 된다.

 div,h1 {
        color: bisque;
      }

이렇게. 엇...근데 저거 중간에 컴마 생략한 어떻게 되나요???

5. 자식 태그 선택

div p {
        /* 부모태그 안에 자식태그에 스타일을 주고싶을 때 */
      }

div태그안에 p태그의 스타일을 변경할 수 있다.
태그만 되나요? 아니다 클래스도 된다.

.test .block7{}

이렇게 하면 테스트 클래스를 가진 태그 안의 block7클래스를 가진 태그의 스타일을 변경할 수 있다.
......test 태그 안의 모든 block7은... 저는 직속 자식(자식의자식이 아닌)만 적용시키고 싶은데요?
방향하나 추가하자

6.직속 자식만 적용

 .test > .block7{}

이렇게 하면 된다.

2.input

1.태초에 라벨이 있었다...

인풋에는 라벨이 따라온다. 양식은 다음과 같다.

 <label for="">아이디</label>
        <!-- input을 사용할 때 라벨 붙이는것 처럼 input태그의 이름 -->
        <input type="text" id="user_id" />

이렇게 라벨 밑에 input을 선언함으로서 라벨을 붙일 수 있다.

2.인풋의 타입?

각 인풋에는 타입 속성이 있다.
사용자가 어떤 값을 입력하냐에 따라 타입이 달라진다.

input 태그 타입
hidden:사용자에게 보이지 않지만 서버로 값을 넘길 수 있다.
search:검색 상자를 넣는다.
tel:전화번호를 입력하는 필드를 넣는다.
url:url 주소를 입력할 수 있는 필드를 넣는다.
email:메일주소를 입력할 수 있는 필드를 넣는다.
password:비밀번호를 입력할 수 잇는 필드를 넣는다.
datetime:국제 표준시로 설정된 날짜와 시간을 넣는다
date:사용자 지역을 기준으로 날짜 연,월,일을 넣는다.
month:사용자 지역을 기준으로 날짜 연,월
week:사용자 지역 기준 연,주
range:숫자로된 수치를 조절 할 수 있는 슬라이드 막대를 만든다.
color:색상표를 만든다.
checkbox:주어진 항목에서 2개이상 선택 가능한 체크 박스
radio:한개만 선택 할 수 있는 체크 박스를 만든다.
file:파일을 첨부할 수 있는 버튼
image:버튼대신 사용할 이미지를 넣는다.
button:버튼을 넣는다

3.display

자바스크립트로 많이 다뤄본 디스플레이다.
가장 대표적인 3가지를 알아보자

1.block

div태그를 생성하면 부여되는 기본 속성이다.
block은 블록요소,div태그의 기본값,자기의 너비를 전부갖고 옆에 아무도 없어야힌다.
때문에 div태그에 입력되는 값의 가로길이에 상관없이 한 칸이 다 차지되는 것이다.

2.inline

block의 반대되는 요소이다. span태그가 대표적이다.
인라인,span,a,등등 기본값을 인라인으로 가지고 있고 옆으로 태그가 자리 할 수 있다.

3.flex!

미안하다.. 이거 보여주려고 어그로 끌었다...flex성능 ㄹㅇ 실화냐??css가 웅장해진다.
지금까지 "html로 코딩"하면서 가장많이 쓴 기능이 아닐까 싶다
기본적으로 요소를 가로정렬해주며 justify-content,align-items로 중앙정렬이 매우 쉽다. 무엇보다 개발자도구에서 ui로 확인 할 수 있기 때문에 많이 사용된다.
여기서 자식요소는 태그 안의 html content도 포함된다.
즉,

<div class="sub_container_img">Image</div>
html
.sub_container_img {
  width: 20%;
  height: 70%;
  border: 1px solid silver;
  display: flex;
  justify-content: center;
  align-items: center;
}
css

이렇게 해도

이렇게 중앙정렬이 된다는 것이다. text-align해도 안된다면 flex를 써보자

마지막으로 오늘 배운 css를 정리하고 마치겠다.

/* style 태그에 작성했던 방식으로 코드를 작성해주면 된다. */
div {
  color: red;
}

/* basic css */
.display {
  display: block;
  /* block은 블록요소,div태그의 기본값,자기의 너비를 전부갖고 옆에 아무도 없어야힌다. */
  display: inline;
  /* 인라인,span,a,등등 기본값을 인라인으로 가지고 있고 옆으로 태그가 자리 할 수 있다. */
  display: flex;
  /* 자식태글들을 정렬 시킬 수 있다. 정렬 시킬 수 있는 방식은 여러가지가 있다. */
  display: inherit;
  /* 부모한테 값을 가져와서 적용시킨다.사용 할 일이 거의 없긴함 */
  display: initial;
  /* 태그가 기본적으로 가지고 있던 속성으로 초기화, 기본값으로 적용 */
  display: none;
  /* 화면에서 지운다. 태그를 보이지 않게... 나중에 자바스크립트에서 display:none 은 선택이 되지 않는다.
   */
}

.wh {
  width: 100px;
  /* 태그의 너비 */
  height: 100px;
  /* 태그의 높이 */
  width: max-content;
  /* 가지고있는 자식 태그의 너비만큼 차지한다. */
  width: min-content;
  /* 가지고 있는 자식 태그의 최소만큼 너비를 차지한다. */
  max-width: 100px;
  /* 설정한 너비 이상으로 태그의 너비가 넓어지지 않는다.최대 너비*/
  min-width: 100px;
  /* 설정한 너비 이하로 태그의 너비가 줄어들지 않는다. */
}

.content {
  width: 100px;
  height: 100px;
  /* 자식의 태그가 부모영역 이상으로 보이지 않게 설정 */
  overflow: hidden;
  /* 자식의태그의 내용을 스크롤로 처리 */
  overflow: scroll;

  /* 스크롤 방향을 x축으로 만들거냐? y축으로 만들거냐? */
  overflow-x: scroll;
  overflow-y: scroll;
  /* x축만  스크롤 가능하게 */
  overflow-x: scroll;
  overflow-y: hidden;

  /* 투명도 설정해 줄 수 있다.1이 최대치 100% */
  opacity: 0.2;
}
.text {
    font-size: 16px;
    /* 글씨체 크기 pc 크롬 기준으로 기본값이 16px */
    /* 환경에 따라 기본값이 다를 수 있다. */
    font-weight: 500;
    /*글씨의 굵기 */
    /* 기본값은 500이고 글꼴을 가져왔을 땐 기본값이 변할 수 있다. */
    color:blue;
    /* 글씨의 색 rgb(),rgba() 등등으로 설정이 가능하다. */
    text-align: center;
    /* 텍스트 정렬을 가운데로 */
    text-align: end;
    /* 오른쪽 끝으로 정렬 */
    text-align: start;
    /* 왼쪽 끝으로 정렬 */
    text-decoration: overline;
    /* 텍스트에 줄 긋기 */
    text-decoration: underline;
    /* 텍스트에 밑줄 추가 */
    text-decoration: none;
    /* 텍스트 꾸밈 요소 제거 */
    letter-spacing: 10px;
    /* 글자의 간격 조절 */

}

기억은 다 해보고, 안되면 그런게 있었지~~하고 구글링을 해보자

느낀점:예전에 a태그에 밑줄과 색을 바꾸려고 구글링을 엄청했던 기억이 난다. 본과에서도 공부하다 느끼는 거지만 기능하나하나를 완벽하게 기억은 못해도 "아 맞다.. 이걸 쓰면 될 것 같은데..","아 맞다... 이거 여기서 본 것 같은데.." 정도의 두리뭉실한 기억을 유지시키는게 좋은 공학자의 조건인것 같다.
기초적인 부분에 충실해서 막히는 것이 있을 때 해답을 찾기위한 해상도를 높이는 느낌으로 열심히 공부하려 한다.