HTML17 [211228] label응용, positon:flex, box-shadow, 라이브러리 목차 1. input과 label 2. transform 3. display:flex 4. box-shadow 1. input과 label See the Pen label by supermint (@ma_ad_shouri) on CodePen. 1) input과 label이 선언된 순서대로 각각 생성된다. 2) 코드가 옆으로 나열되는 것과 background가 글씨크기만큼 생성되는 것을 보면 inline 속성이다 3) input id를 label 요소인 for로 연결하면, label을 클릭할때 input의 checkbox도 같이 반응한다. 4) 2번째 박스는 색이 없고, 3번째 박스는 색이 있는 이유. 인접접근자는 연결하려는 본체코드 밑에 있어야 적용되기 때문. 2번째 박스는 input 코드가 label.. 2021. 12. 28. [211227] 반응형 목록 만들기 / 햄버거, 속성선택자, 인접접근자 목차 1. 속성선택자 (실습 : 반응형 메뉴) 1-1. input 복습 1-2. [ ] 1-3 :checked 2. Display:none; 3. 실습 : 햄버거 버튼 3-1. 인접접근자 (+) 3-2. :nth-child (n) -> 이름 알아오기(숙제) 3-3. relative와 absolute의 상관관계 3-4. transform:translateY (-50%); 3-5. 생성기준점을 알고 회전시키기 3-6. 모션 만들기 3-7. 커서 모양 바꾸기 3-8. clear:both 4. 프로그래밍 팁 1. 속성선택자 (실습 : 반응형 메뉴) 1-1. input 복습 기본 체크형 input 박스 check check를 누르면 입력란에 커서가 나타남. check check를 누르면 체크박스가 체크됨 -> 이.. 2021. 12. 27. [211225-211226] 클론코딩_연습day 홀로 짜보는 클론코딩을 하며 메타인지를 해봅시다. 목적 내가 뭘 알고 뭘 모르는지 알기. 진행 1. html 큰 틀을 짜놓는다 2. css로 background 색을 넣어서 영역을 확인한다. 3. 세부요소를 넣는다 방법 각 파트별로 걸린 시간을 작성할 것 코드가 꼬인다고 재작성 하지 않을것. 수정으로만 반드시 할것. 주석이랑 블로그에 문제점과 해결법과 생각한 방향을 작성할것. 이렇지 않을까?하고 넘어가지 말고 속성은 정확히 알고 사용할것. 사용의도를 설명 가능해야함. 목표 영역이 흐르고 넘치는 것을 무지성으로 때려박아서 해결하지 않는것. 예상 문제점 어느 요소가 block이고 inline속성인지 애매 block, inblock, inline-block의 차이점 애매 float의 기능 개념 애매 뭐, 해봅.. 2021. 12. 25. [211223] 클론코딩 / 게시판 만들기 목차 클론코딩 / 게시판 만들기 1. 구역 나누기 2. 이미지 삽입하기 3. 선 삽입하기 3-1 border과 문제점 3-2 해결방식 4. 모서리 둥글게 만들기 5. 텍스트 가운데 정렬 6. 마우스 오버 기능 클론코딩 / 게시판 만들기 1. 구역 나누기 table을 사용할 수도 있겠지만 보다 깔끔하고 수정이 용이한 ul, li기능을 사용한다. 좌측 초록색 박스와 우측 초록색 박스의 행렬이 다르기때문에 각각 다르게 작성한다. 빨간 박스 초록박스(좌) -> ul 보라색박스 6개 -> li 오렌지색박스 3개 배경에 이미지 삽입 초록박스(우) 보라색박스(상) 2개 보라색박스(하) 1개 작성한 html 2. 이미지 삽입하기 #container > #left>ul>li{ background: url("../img/.. 2021. 12. 23. [211222] CSS 이미지, 링크 넣기, position, 클론코딩 더보기 더보기 더보기 목차 1. 엘리먼트 안에 같은 엘리먼트를 넣기 1-1. div 1-2. ul, li 1-3. inline-block의 단점 1-4. float 2. 이미지 넣기 3. 메뉴 만들기 1. 엘리먼트 안에 같은 엘리먼트를 넣기 1-1. div 원래 모든 엘리먼트는 기본적으로 여백을 어느정도 가지고있다. 처음에 시작할때 margin, padding을 0으로 놓고 시작하면 편하다. 코드가 실행되는 위치 무조건 왼쪽 상단 꼭지점부터 시작해서 생성됨. 같은 위치에서 생성될 경우 나중에 실행된 코드가 위에 덮어씌워진다. 후발 생성된 엘리먼트는 속한 엘리먼트 기준으로 생성되는 위치가 달라진다 ex) 가운데 정렬된 1번 박스 안에 2번 박스를 생성한다. -> 가운데 정렬된 1번 박스의 왼쪽 상단 꼭지점.. 2021. 12. 22. [211221] table과 CSS 기초 목차 1. 지난 수업에 대한 보충 설명 파일명을 작성하는 법 html 작성을 줄이는 단축키 id란? 2. table table의 기능 table을 만드는 법 (개인과제) 회원가입폼을 만들어보기 3. css css의 기능 css의 적용방법 인라인 스타일 스타일 엘리먼트 사용 외부파일 생성 css 살펴보기 1. 지난 수업에 대한 보충 설명 1-1. 파일명을 작성하는 법 영어로 작성하고 확장자'html'을 붙인다. ex) file.html 특수문자, 띄어쓰기 x, 예외특수문자 - _ 가능, ex) file_name.html 1-2. html을 작성할때 조금 더 편하게 하는 단축키 !를 치고 엔터 1-3. id란?(어제 질문에 대한 답이므로 오늘거에 링크 연결해놓기) 특정 엘리먼트 안에서 고유한 값을 가지기 위.. 2021. 12. 21. [211220] 브라우저의 구성과 html 기초 목차 1. 브라우저의 구성 2. html의 기초 3. 엘리먼트의 속성과 작성법 4. 엘리먼트의 종류 1. 브라우저의 구성 1-1. 프론트, 백엔드, css 1-2. 인터넷 창을 구성하는 2가지 네트워크(주소창) 화면을 구성하는 렌더링 1-3. 그렇다면 화면은 어떻게 만드는 것일까? 3가지로 이루어진 렌더링 : html, css, 자바스크립트 브라우저별로 개별적으로 다른 렌더링. 개발자 도구(F12) -> html을 볼 수 있음, 볼 수 있는 위치 지정 가능, 화살표를 누르면 항목별로 알 수 있음. 2. html의 기초 2-1. visual studio 작업 환경 만들기 visual studio 프로그램 설치 -> 확장 탭에서 korean 설치, live server 설치 visual studio code.. 2021. 12. 20. 이전 1 2 다음
