221027 로그인 팝업 만들기 - form태그 / CSS-before, after / 반응형 웹 만들기 - 미디어쿼리

오늘 내가 배운 것 1. HTML - form 태그 2. CSS - :before, :after 3. 반응형 웹 - 미디어 쿼리 1. HTML-form 태그 form 태그 : 사용자가 제공하는 데이터를 서버에 저장시키기 위해 사용하는 태그 (사용자의 데이터를 수집한다.) 로그인 아직도 회원이 아니신가요? 회원가입 input 태그를 이용할 때 form 태그를 상위 태그로 사용해 데이터를 서버에서 저장한다. form태그를 쓸 때는 상위에 다른 엘리먼트로 감싸서 사용하는 것을 권장한다. form 태그의 필수 속성으로 속성 method 와 속성 action이 있다. 속성 action 과 속성 method action의 속성 값은 “링크” 이다. (button type=”submit” 과 연동해서 작동한다.) m..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2022. 10. 27.
• textsms

CSS - flex box : display flex, CSS 개구리게임 (flex 게임)

기존에 레이아웃을 구성할 때는 각 요소에 원하는 위치 조절 속성 ( display, position, float)을 이용하여 각 요소들을 직접 이동시켰다. 그래서 CSS에서 각 요소마다 위치를 정해주는 속성 및 속성 값을 사용하면서 코드 줄이 길어졌는데, flexbox를 이용하면 간단하게 레이아웃을 구성할 수 있게 된다. CSS - position (블럭 위치조절 3가지 방법) CSS - position (블럭 위치조절 3가지 방법) CSS 블럭 위치 조절 3가지 방법 display : inline-block 속성 float 속성 position **포지션을 쓰면 z-index를 다 써주는 것이 좋다. display : inline-block 속성 display 의 속성 값으론 inline , inlin..

• format_list_bulleted HTML & CSS
• · 2022. 10. 26.
• textsms

221026-게시판 만들기 : HTML table 태그, CSS-!important, box-shadow, CSS 선택자

오늘 내가 배운 것 1. CSS 선택자 2. HTML 3. !important 4. box-shadow 1. CSS 선택자 ~ 결합자 부모가 같은 형제 태그를 선택할 수 있다. input[type=”checkbox”] {} input 태그에서 타입이 체크박스인 요소를 선택 2. HTML HTML에서 클래스를 2개 적용시키기 2가지 클래스 사이에 띄어쓰기를 사용한다. ex) class=”aa bb” html - table 엘리먼트 행과 열로 이루어진 표를 만든다. 1줄(행) or 1칸(열) th : 머리글 기본적으로 굵고, 가운데 정렬되어있다. (제일 위에 각 칸에 종류를 만들 때 사용) border-collapse: collapse; 테두리를 겹치게 한다. border: 1px 테두리를 그리면 겹치는 부..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2022. 10. 26.
• textsms

221025 HTML/CSS 를 이용한 애니메이션 효과-학원 홈페이지 클론코딩

오늘 내가 배운 것 1. HTML - label, CSS - '+' 결합자 2. HTML 속성과 속성 값 3. CSS 속성과 속성 값 4. CSS 선택자 1. HTML-label, CSS- '+' 결합자 HTML- 태그 label에 for 속성, input의 id를 속성 값으로 준다면 label의 데이터를 선택했을 때 input을 선택해 주는 방법이 있다. CSS - “+” 결합자 ex) label + #user 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택하는 결합자 아이디 2. HTML 속성과 속성 값 input 태그의 type="radio" 속성 name=”” 을 이용해서 이름을 정해주고 이름이 같은 radio 끼리 중복 선택이 불가능하다. 보통 성별을 선택하는 항..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2022. 10. 25.
• textsms

221022 네이버 회원가입 클론코딩

1. 네이버 회원가입 클론코딩 어제 했던 수업을 다시 처음부터 복습해봤다. https://baekspace.tistory.com/31 221021 CSS와 네이버 클론코딩 오늘 내가 배운 것 1. HTML element 2. CSS 3. CSS 적용시키는 3가지 방법 4. CSS 선택자, 속성, 속성값 1. HTML element 웹사이트 브라우저를 구성을 확인하다 보면 address, section, article, aside 태그를 볼.. baekspace.tistory.com 아쉬운 점으로 밑에 내용이 있었는데 1. 처음에 레이아웃을 짤 때 input 안에 블록을 더 세분화해서 넣었어야 했는데, 세분화하지 못해서 위치를 세세하게 이동시킬 수 없었다. 조금 진행된 상태에서 파악을 한 부분이라 코드 전..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2022. 10. 23.
• textsms

CSS 선택자, CSS 속성과 속성값

CSS 선택자, 속성, 속성값 선택자란? 말 그대로 선택을 해주는 요소, CSS 규칙을 적용할 요소를 뜻한다. 선택자는 크게 기본 선택자, 그룹 선택자, 결합자 등이 있다. (기존에 선택자를 잘 못 이해했던 것 같다. 속성이나 속성 값은 참고!) https://baekspace.tistory.com/19?category=1126488 CSS 기초 CSS CSS : Cascading Style Sheets 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트 CSS 선택자 선택자 예시 설명 # #header{} id . .header{} class (element) body{} 엘리먼트 전체 * *{} 전체 > ul > l.. baekspace.tistory.com /*기본 문법*/ 선택자 { 속성 : ..

• format_list_bulleted HTML & CSS
• · 2022. 10. 21.
• textsms