프로그래밍/html14 [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 다음
