분류 전체보기280 [211230] clone_네이버 회원가입폼 / absolute, relative 목적 1. 전체적인 구성을 짜는 능력을 기르기 2. 보기에 예쁜 여백 폼을 손에 익히기 막혔던 것 1. depth의 깊이 캡쳐하면 이렇게 뜨길래 전체 이미지 width:100%; 중간 이미지 width:460px; margin:auto;를 줌. 세부적인 요소들을 보려고하니까 뭔가 depth가 나랑 안 맞아서 계속 헤맴 //max-width 768 전체 //460 중간전체 //통 //100% id pw re-pw //id 네이버 코드를 보면 나보다 div로 한번 더 싸놓았다. 왜 굳이굳이 이렇게 빡빡하게 씌운거여.. 예전에 뭔가 있었다가 사라졌던가, 아니면 버젼이 올라가면 적당히 둘러싸도 괜찮은데 옛날 버젼 애들은 호로록 흘러서 그런가. 2. absolute랑 relative 다시 알아야겠구나.. 휴대전화.. 2021. 12. 30. [211230] 자바스크립트 / 변수, 예약어, 연산자, if문, for문 목차 1. 자바스크립트 2. 컴퓨터의 간단한 구조 3. 저장단위 4. 예약어 5. 연산자 6. 조건문 자바스크립트가 나타난 배경 최초의 브라우저 넷스케이프 (jsc는 없었음) -> 10일만에 jsc 쨔잔! 만들어냄. 그러니까 저급한 단어란걸 인식하고있자. -> 윈도우 마소가 넷스케이프 카피캣을 해서 익스플로러를 만들어냄 -> 문제는 서로 약간씩 다르게 기능을 하게 만듬 = 코드를 다르게 읽는거지(크로스 브라우징을 하게 만든 원흉) 파이어폭스 등장 플래시(액션 스크립트)를 자바스크립트 대신해서 적용함. -> 익스플로러, 파이어폭스, 다른 브라우저 다 다르게 함 대환장 파티 구글이 만든 크롬(2007) 등장 자바스크립트를 해석해주는 v8 엔진 기능이 매우 좋았고, 넷스케이프의 표준 문법을 지키는 브라우저.-.. 2021. 12. 30. [211229] url, uri, form table 복습 tr : 줄(행)부터 시작하는 테이블 td : 줄(행)을 기반으로 열(칸)을 붙여나가기 url, uri, queryString, 주소 읽기 작성한 html끼리는 a 태그를 이용해 연결이 가능하다. 이제는 연결을 해서 생성하는 주소에 신경쓸때가 되었다 URI와 URL의 차이점 uri Uniform Resource Identifier, 자원을 구분하고 접근하기 위해 사용하는 유일한 식별자 주요목적 : 리소스를 찾는것, html, xml 및 기타 파일에도 사용됨 예) :urn:isbn:0-342-34243-3 url Uniform Resource Locator (지원의 위치), 자원의 주소로 자원을 식별한다 주요목적 : 웹 페이지만 찾는데 사용 예) http://google/com url 구문.. 2021. 12. 29. [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 ··· 25 26 27 28 다음
