본문 바로가기
부트캠프

[TIL] 유데미X사람인 취업 부트캠프 7일차 / css변수 및 전환, html 양식 요소

by 상똥 2023. 12. 21.

 

[1. 오늘 배운 것]

1. CSS변수, CSS사용자 정의 속성

- 다른 속성의 값을 미리 정의하고 프로젝트에서 정의한 값을 사용하는 것을 도움

- html선택자에서 변수 정의

- var(변수명)으로 사용

html {
    --color-grey-100: rgb(236, 236, 236); /*변수 설정*/
    /*숫자가 낮을수록 밝은색*/
    background-color: var(--color-grey-100);
}

 

 

2. 실행 중인 CSS변수

- 미리 정의된 값을 사용하면 값이 통일된 요소 하나하나의 값을 바꾸지 않아도 된다

- 즉 편리함

html{
    --color-grey-100: rgb(236, 236, 236);
    --color-grey-400: rgb(134, 134, 134);
    --color-grey-600: rgb(58, 58, 58);
    
    --size-1: 18px;
    
    background-color: var(--color-grey-100);
}

h1{
    /*color: rgb(58, 58, 58);*/
    color: var(--color-grey-600);
}

p{
    /*font-size: 18px;*/
    font-size: var(--size-1);
}

 

 

3. "root" vs "html" vs "*" 선택자 비교하기

- html : Selects html elements 

- root : Selects element which is the root document

- * : Selects all elements of the html document

 

4. CSS변환 이해하기

- 변환 Transformation : 요소의 모양을 이동하거나 변경하는 것

- 전환 Transition : 초기 상태에서 변환된 상태로 부드럽게 바꾸는 것 

- 사이즈, 각도 등 다양한 부분을 전환할 수 있음

card-container:hover{
    /* 전환 옵션 추가 */
    transform: scale(2);	
}

 

 

5. CSS전환 추가

- hover가 아닌 기본 상태에 transition을 추가해야 전환효과를 적용할 수 있다

- hover는 별다른 효과 없이 바로 바뀜

- Duration : 전환이 일어나는 시간

- ease : 전환이 일어나는 속도

ease 전환 타입, 출처 cubic-bezier(.17,.67,.83,.67) ✿ cubic-bezier.com

card-container {
    transition: transform 0.5s ease-out;
}

 

 

6. SVG작업

- Scalable Vector Graphics

- 2차원 벡터 그래픽을 표현하기 위한 XML기반 마크업 언어

- 브라우저가 렌더링할 수 있는 확장형 이미지의 텍스트 기반 묘사

- heroicons 등의 사이트에서 소스를 가져와 적용 가능

 

7. 주요 html양식 요소

- <input type="..."> : 다양한 입력 요소 설정

- <textarea> : 사용자가 남기는 댓글 등을 가져오는 데 쓰임 (multi line)

- <select> : 사용자가 여러 값 중 하나를 선택할 수 있도록 함

- <button> : 입력 또는 리셋 등을 위한 요소

 

8. 양식 요소&양식 제출, 다양한 요청 유형

- html

    <form action="/" method="GET">
        <label for="user-name">Name</label>
        <input type="text" name="user-name" id="user-name" />
        <button>Submit</button>
    </form>

- form : 시작을 알리는 것

- label & button : 레이블로 버튼의 용도를 알림, 레이블을 누르면 자동으로 입력창으로 이동

- button : 제출용 버튼

 

9. 다양한 입력 유형 이해하기

- <input type="text"> : 디폴트값, single line

- <input type="email"> : 이메일 주소만을 입력받음

- <input type="number"> : 숫자 입력에 최적화 (숫자 키보드가 뜸)

- <Input type="password"> : 비밀번호 입력에 최적화 (사용자의 입력값을 숨김)

- <input type="date"> : 날짜 입력에 최적화

- <input type="radio"> : 여러 선택지를 생성하되 하나의 선택지만 고를 수 있는 것

- <input type="checkbox"> : 토글버튼

- <input type="file"> : 업로드할 파일을 사용자가 선택할 수 있는 파일 셀렉터를 생성

- 레이블 태그가 필요하고, 아이디를 통해 레이블과 연결되어야 한다!

 

10. 이메일, 숫자 , 비밀번호, 날짜 유형 이해하기/ 라디오 버튼 작업하기

- 라디오 버튼 : 한가지 값만 선택 가능

- 체크박스 버튼 : 여러가지 값 선택 가능

- html

<body>
    <form action="/" method="GET">
        <label for="user-name">Name</label>
        <input type="text" name="username" id="user-name" />
        <label for="user-email">Email</label>
        <input type="email" name="useremail" id="user-email" />
        <label for="user-age">Age</label>
        <input type="number" step="1" name="userbirth" id="user-age" />
        <label for="user-birth">Birth</label>
        <input type="date" name="userbirth" id="user-birth" />
        <hr>
        <h2>How should we verify your account?</h2>
        <div class="form-control-inline">
            <input type="radio" name="verify" id="verify-text-message" value="verify-text-message"/>
            <label for="verify-text-message">Via text message</label>
        </div>
        <div class="form-control-inline">
            <input type="radio" name="verify" id="verify-phone-call" value="phone-call"/>
            <label for="verify-phone-call">Via phone call</label>
        </div>
        <div class="form-control-inline">
            <input type="radio" name="verify" id="verify-email" value="email"/>
            <label for="verify-email">Via an email</label>
        </div>

        <div class="form-control-inline">
            <input type="checkbox" id="agree-terms" name="terms">
            <label for="agree-terms">Agree to terms?</label>
        </div>

        <div class="form-control-inline">
            <input type="checkbox" id="contact-email" name="contact" value="email">
            <label for="contact-email">Contact me via email</label>
        </div>

        <div class="form-control-inline">
            <input type="checkbox" id="contact-phone" name="contact" value="phone">
            <label for="contact-phone">Contact me via phone</label>
        </div>
        <button>Submit</button>
    </form>
</body>

- css

body {
    background-color: rgb(30, 30, 30);
    margin: 8rem;
    font-family: "Roboto", sans-serif;
}

label {
    margin-bottom: 0.5rem;
}

form {
    width: 30rem;
    margin: 3rem auto;
    background-color: rgb(255, 255, 255);
    padding: 1rem;
    border-radius: 6px;
}

input {
    width: 100%;
    display: block;
    margin-bottom: 1rem;
    box-sizing: border-box;
    font: inherit;
    border: 1px solid rgb(184, 184, 184);
    padding: 0.25rem;
    color: rgb(61, 58, 58);
}

input:focus {
    background-color: rgb(219, 190, 253);
    color: rgb(32, 5, 63);
    border-color: rgb(32, 5, 63);
}

button {
    display: block;
    font: inherit;
    background-color: rgb(32, 5, 63);
    color: white;
    border: 1px solid rgb(32, 5, 63);
    padding: 0.5rem, 1.5rem;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: rgb(52, 14, 95);
    border-color: rgb(52, 14, 95);
}
.form-control-inline{
    display: flex;
}
.form-control-inline input{
    width: auto;
    margin-right: 0.5rem;
}

 

11. 긴 텍스트를 위한 textarea요소, 드롭다운 추가

- html

        <!--textarea-->
        <label for="usermessage">Your message</label>
        <textarea id="usermessage"></textarea>

 (...)

        <!--dropdown-->
        <label for="favorite-color">Your favorite color?</label>
        <select id="favorite-color" name="favorite-color">
            <option value="Blue">Blue</option>
            <option value="Black">Black</option>
            <option value="Red">Red</option>
        </select>

 

 

12. 양식 버튼에 대한 추가 정보

- type=reset 을 적용하면 필드를 모두 공란으로 만들 수 있음 (Clear 버튼)

 

13. 속성 검증하기 

- required : 공란을 허용하지 않음

- min, max : number타입, date타입의 최소, 최대 길이를 설정 (날짜 형식 : YYYY-MM-DD)

<label for="user-age">Age</label>
<input type="number" step="1" name="userbirth" id="user-age" required min="18" max="100" />
<label for="user-birth">Birth</label>
<input type="date" name="userbirth" id="user-birth" required min="1921-01-01" max="2003-01-01"/>

- minlength, maxlength : 최소, 최대 길이를 설정

<label for="user-name">Name</label>
<input type="text" name="username" id="user-name" required minlength="2"/>

<label for="user-password">Password</label>
<input type="password" name="userpassword" id="user-password" required minlength="7" />

 

14. 추가입력&양식 속성

- placeholder : 필드란에 적용, 사용자가 아무것도 입력하지 않았을 때 보여짐, 가이드를 주고싶을 때 사용

- rows : 텍스트 높이를 설정

- resize: css에서 none값으로 설정하면 크기 textarea의 크기 조절을 방지함

 

[2. 오늘 잘한 점]

미션(?)으로 만드는 웹사이트를 혼자 구축했다 ㅎㅎ 나자신 멋져 대단해 칭찬해

 

[3. 개선해야할 점]

잡생각이 너무 많아서 집중이 안됐다 지금 하고있는 공부에 집중하자!

'부트캠프' 카테고리의 다른 글

[TIL] 유데미X사람인 취업 부트캠프 9일차 / javascript, DOM을 이용한 작업  (1) 2023.12.26
[TIL] 유데미X사람인 취업 부트캠프 8일차 / javascript기초 이해(함수, 배열, 메서드 등)  (0) 2023.12.22
[TIL] 유데미X사람인 취업 부트캠프 6일차 / 반응형 웹 제작, 유닛과 미디어 쿼리  (0) 2023.12.20
[TIL] 유데미X사람인 취업 부트캠프 5일차 / css grid, UTF-8 유니코드  (1) 2023.12.19
[TIL] 유데미X사람인 부트캠프 4일차 / 깃 브랜치, css flexbox  (1) 2023.12.18

관련글

티스토리툴바