IT 공부

1. table 태그 2. form 태그 2.1. URI vs. URL 2.2. method (GET, POST) 1. table 태그 table 태그는 엑셀의 표처럼 행과 열이 있는 테이블을 구현하기 위해 사용한다. table 태그 안에 tr, td 태그가 있다. tr 태그는 1개의 행을 의미하고, td는 그 행 안에 존재하는 각각의 요소를 말한다. table 태그가 웹 브라우저에 나타난 모습이다. border="1"로 경계선이 보이도록 했다. 2. form 태그 form 태그는 전송할 데이터의 양식을 지정해준다. form 태그 안에 있는 input 태그에 입력된 값들은 submit 타입의 input 태그를 클릭하면 한 번에 전송된다. 앞서 다루었던 table 태그를 쓰고, 바깥 부분에 form 태그로..

1. CSS 브라우저 접두어 2. !important 속성 3. 태그의 focus 속성 4. display: flex; (flexbox froggy) 1. CSS 브라우저 접두어 접두어 해당 브라우저 -webkit- Safari, Chrome, Android, iOS, Webkit -moz- Firefox, Mozilla -ms- Internet Explorer -o- Opera 브라우저 접두어는 CSS에 새로운 속성을 추가하기 전에, 일종의 테스트를 위해 실험 기간 동안 임시적으로 사용한다. 표준으로 만들어지기 전에 일어날 문제들을 사전에 막기 위함이다. 요즘은 잘 사용하지 않는다고 한다. 2. !important 속성 !important 사용법은 { 속성 : 속성값 !important; } 이다. C..

1. 목표 2. 완성 코드 1. 목표 버튼을 클릭하면 팝업창이 나타나도록 하는 것이 목표이다. 버튼을 누르면 배경색이 바뀌고 팝업창이 나타난다. 이때 팝업창의 X를 클릭하면 다시 [그림 1]의 상태로 돌아간다. 2. 완성 코드 input 태그를 써서 checkbox 타입을 지정하고, id는 layerPopup이라고 했다. label 태그를 붙여서 "버튼"이라고 쓰여져 있는 곳을 클릭해도 체크박스를 클릭한 것과 똑같이 작동하도록 만들어 주었다. div 태그를 이용하여 팝업창이 떴을 때 나타나는 배경 layer_bg과 팝업창 popup을 생성했다. h2 글자 크기로 제목을 적고 label 태그로 X를 클릭하면 체크박스를 클릭한 것과 똑같이 작동하도록 만들어 주었다. [그림 4]는 CSS에 대한 설명이다. t..

1. 목표 2. 완성 코드 1. 목표 메뉴를 클릭하기 전에는 햄버거(?)처럼 생긴 메뉴의 모양만 나타난다. 메뉴를 클릭했을 때에는 메뉴바가 나타나면서 그 안에 menu1, menu2, menu3 이라는 목록이 보인다. 2. 완성 코드 [그림 1]에 나타나는 메뉴를 input 태그를 사용하여 type은 checkbox, id는 icon으로 지정하였다. span 태그 3개를 이용해서 햄버거 모양이 되도록 CSS에서 작업할 것이다. [그림 2]에서 나타나는 메뉴바는 div 태그를 사용하여 id는 header로 하고 그 안에 ul, li 태그를 사용해 menu 목록을 만들었다.

1. 선택자 2. clear 속성 3. 클론 코딩 연습 사이트 1. 선택자 선택자 종류 선택자 형태 사용 예 전체 선택자 * * 태그 선택자 태그 h1 아이디 선택자 #아이디 #header 클래스 선택자 .클래스 .item *속성 선택자 선택자[속성] input[type] *인접 선택자 + #icon + label '선택자'란 CSS로 HTML문서에 스타일을 입힐 요소를 선택하는 문자이다. 선택자를 사용할 때에는 '선택자 { 속성 : 속성값; }' 의 형태로 사용한다. 예를 들어, CSS문서에 * { margin:0; padding:0; } 라고 작성하면 이 문서와 연결된 HTML의 모든 영역에 대해 margin과 padding 값이 0으로 설정된다. 태그 선택자는 동일한 태그가 있는 모든 곳에 적용되는..

1. Content 영역 삽입 2. 혼동하기 쉬운 태그 및 속성 정리 2.1. / 2.2. , / 2.3. display: block / inline /inline-block ; 1. Content 영역 삽입 id가 content인 div 태그를 생성하고 그 안에 id가 left, right인 div 태그를 만들어주었다. 개발은 나 혼자 하는 것이 아니기 때문에 id명은 직관적으로 쉽게 추측할 수 있는 것으로 하는 것이 나를 위해서도, 남을 위해서도 좋다. 따라서 left, right 같은 id 명을 쓰는 것보다 content의 왼쪽이나 오른쪽 부분에 넣을 내용으로 명시해주는 것이 바람직하다. [그림 1]을 보면 태그가 6개 포함되어 있으므로, id=left에는 content가 con1을 포함하여 6개가..

1. 사진 업로드 2. 글자 정렬 및 컬러 입히기 3. margin, padding, border 4. position 속성 1. 사진 업로드 복제하려고 하는 웹페이지는 '경일게임아카데미'의 웹사이트이다. 웹사이트에 사진을 올리려면 먼저 웹사이트의 사진을 내 작업 폴더에 가져와야 한다. 학원 웹사이트의 로고와 배너 사진을 index.html 파일이 속해 있는 21.12.22 폴더에 저장했다. 태그 안에 src=".\logo.png"를 넣어주었는데, 21.12.22 폴더에 속한 logo.png 사진을 불러온다는 의미이다. 배너 사진은 visual_1.png로 같은 폴더에 저장하여 태그에 붙여주었다. 웹페이지에 로고와 배너가 정상적으로 업로드된 것을 확인했다. 2. 글자 정렬 및 컬러 입히기 먼저 ,태그를 ..

1. CSS 정의와 특징 2. CSS 기능 3. Windows 명령어 1. CSS 정의와 특징 CSS(Cascading Style Sheets)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 기본 파일명은 style.css이다. HTML과 같은 마크업 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다. 2. CSS 기능 먼저 css 파일을 따로 사용하지 않고, HTML에 ..

1. Front-End vs. Back-End 2. Rendering(랜더링) 3. Web Browser(웹 브라우저) 4. Visual Studio Code 5. HTML(Hyper Text Markup Language) 1. Front-End vs. Back-End Front-End와 Back-End의 차이는 앞에 붙은 Front와 Back의 단어 뜻에서 직관적으로 알 수 있다. Front-End는 눈에 보이는 곳, Back-End는 눈에 보이지 않는 곳이라고 생각하면 쉽다. Front-End 웹 개발은 HTML, CSS, JavaScript의 사용을 통해 웹 사이트의 그래픽 사용자 인터페이스를 개발하여 사용자가 해당 웹 사이트를 보고 상호작용할 수 있도록 하는 것이다. Back-End는 컴퓨터와 응..