지피티활용능력1급

본격적으로 css에 대해 다뤄보려고 한다. html파일 내부에 태그를 이용해도 되지만 보통 css파일을 생성해서 태그를 이용해 가져오는 방식을 선호하는 편이다. href="css파일명"을 적어주면 css파일과 연결된다. 웹페이지에 도형들로 어떠한 모양을 표현하는것으로 css를 본격적으로 탐구해보자 오늘의 목표는 웹 페이지에 다음과 같은 모양의 그림을 표현하는 것 1. html 먼저 html을 설계해보면 하나의 div박스와 그 안에 들어있는 3개의 div박스 wheat색의 큰 박스의 div를 클래스 명 "wheat"라 두고 내부의 세 개의 박스를 wheat의 자식으로 넣어준다. 2. css 배경색을 토마토색으로 지정해준 후 div박스가 화면 정중앙에 위치할 수 있도록 다음 세가지 작업을 해준다. displ..

html을 꾸며주기 위한 css에 대해 본격적으로 탐구하고 이에 대한 웹페이지를 직접 만들어볼 것이다.

태그를 이용해 만드는 간단한 회원가입 양식 html만을 이용해서 만들기 때문에 실제 작동은 안됨 우선 제목을 작성해주었다. 보단 알아보기 쉬운 Create An Account Fisrt name Last name Email User name Password Birth date How happy are you? What is your fav.color? 전체 코드 + 추가로 input 속성에 autofocus를 추가해주면 자동으로 해당하는 input에 하이라이트가 된다. (커서가 깜빡이거나 검은색 테두리가 생기는 등)

html만을 이용해 간단한 계정 생성 폼 만들기

html 태그들 1) label과 input태그 두 태그에서는 속성들이 매우 중요하다. body태그 내부의 form태그 먼저 'input'태그는 웹사이트에 무언가를 작성할 수 있게 해주는 것이고 'label'태그는 입력란 앞에 라벨을 달아준다. Profile Photo 먼저 세번째 줄 input부터 보자 placeholder라는 속성에 'Last Name'을 넣어주면 값을 입력하기 전 자리를 지키는 Last Name이라는 글자가 보인다. 그리고 type은 'text' 문자로 받겠다는 것이다. required는 반드시 입력되어야 한다는 것으로 입력하지 않는다면 경고 문구가 나타난다. 다섯번째 줄의 Password는 타입을 password로 해서 비밀번호를 입력받도록 하였고 minlength 속성을 통해 1..

html에 더 많은 태그과 그 속성들의 활용법까지 다양하게 공부를 해볼것이다. (참고강의 : 노마드 코더)

1. VScode에서 html을 작성해 웹에 표기하는 방법 제목 태그인 'h1'과 글씨체를 진하게 해주는 'strong', 그리고 밑줄을 그어주는 'u'태그를 사용해 나타낸 모습이다. 아직은 태그를 자유자재로 다루지는 못하는 상태다. HTML의 태그는 총 150개 정도이며 실제 웹사이트에서는 평균적으로 25정도 사용된다고 한다. 모르는 태그 있을 때는 검색해서 찾아보는 습관 들이기 2. br태그와 p태그 vscode에서 줄바꿈을 했음에도 웹에서는 적용되지 않는다. 여기서 'br' 태그를 이용한다. 다음과 같이 br 태그를 두 번 사용해주면 단락 구분이 정상적으로 이루어진 것을 볼 수 있다. 하지만 'p' 태그를 이용하면 어디서부터 어디까지가 한 단락인지를 표현할 수 있기 때문에 br보다는 활용도가 조금 ..

전에 클론 코딩을 통해 맛만 봤었던 웹 페이지 구축을 다시 시작해볼것이다. 먼저 HTML을 사용한 태그 활용부터 공부하려고 한다. (참고 강의 : 유튜브 생활코딩 WEB)