profile
공부 정리용 블로그
post-thumbnail

validation 관련 속성들

이러한 email type의 input요소는 잘못된 양식의 이메일이 들어왔을 경우 박스 자체적으로 검증과정을 거쳐 경고 메시지를 보낸다. 이 검증을 없애고 싶다면 form 요소에 novalidate 속성을 추가하면 된다.이 속성은 불리언 속성(파이썬의 bool값으로 생

2022년 5월 23일
·
0개의 댓글
·

button 요소에 대한 추가사항

form 요소에 중첩되어 있는 button은 디폴트로 폼을 서버에 제출하게 되지만 반드시 button은 form안에 있을 필요가 없다. form 밖의 button의 동작을 지정하려면 자바스크립트를 사용한다. 또한 form에 중첩된 button은 type속성을 사용하여

2022년 5월 23일
·
0개의 댓글
·
post-thumbnail

textarea 요소와 드롭다운 사용하기

이는 여러 줄을 입력 받기 위해 사용하는 요소이다. 특이한 점은 컨텐츠가 없는 빈 태그임에도 관습적으로 종료 태그를 같이 써준다는 점이다.cols와 rows는 박스의 크기를 지정해준다.또한 여기에 입력한 후 인풋을 제출하게 되면 user-message=dsfadsf%0

2022년 5월 22일
·
0개의 댓글
·
post-thumbnail

라디오 버튼 사용/체크박스 추가

사용자가 옵션 중 한 가지만 선택하도록 해야할 때는 name을 전부 같게 지정해준다. 또한 각각의 옵션에 하나씩 input을 할당해주어야 한다.하지만 input은 블록요소이기 때문에 배치가 잘 맞지 않고, 각 input에 대한 서버로 전송되는 데이터도 지정해주지 않았다

2022년 5월 22일
·
0개의 댓글
·

html 폼 스타일링

form요소가 있든 없든 웹페이지의 구성은 변하지 않는다고 한다. 어쨌든 스타일링은 할 수 있다. input은 form의 크기에 따라 동적으로 바뀌게 하기 위해 100%로 width를 설정했고, 나머지는 그냥 입맛에 맞게 하면 된다. input의 box-sizing은

2022년 5월 22일
·
0개의 댓글
·
post-thumbnail

웹페이지 폼

출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프HTML폼은 사용자와 웹사이트, 앱이 서로 상호 작용하는 기술 중 하나이다. 폼을 사용하면 사용자가 웹사이트에 데이터를 전송할 수 있다.폼에는 수많은 종류가 있으며, 이중에는 위에 나온 대로

2022년 5월 22일
·
0개의 댓글
·
post-thumbnail

문서 흐름

이전에 만들었던 홈페이지이다. 배경이미지를 추가했었는데, 가운데 있는 검은 박스의 콘텐츠를 배경 이미지 중간쯤에 위치하도록 하려면 어떻게 해야할까? 현재 검은 박스는 배경 이미지를 가지는 section 요소 안에 존재하고 있다. 그러므로 단순히 hero-content

2022년 5월 16일
·
0개의 댓글
·

파비콘 추가하기

만들어 놓은 HTML파일을 라이브서버에서 열고, 크롬에서 새로고침 버튼을 오른쪽 클릭하면강력 새로고침이 뜨는데, 저것을 누르면 개발자 도구의 console과 network탭에서이러한 에러 메시지가 나온다. 이 에러 메시지는 favicon.ico 파일을 로드하지 못했기

2022년 5월 11일
·
0개의 댓글
·
post-thumbnail

초짜 프로젝트 1

강의에서 다음과 같이 사이트를 직접 백지에서 부터 만들어보라고 해서 만들어보았다.색은 귀찮아서 통일하지 않았고, 나름대로 최대한 똑같이 만든 것 같다. 처음으로 직접 웹페이지를 만들어보니 성취감도 있었고 재밌었다.그런데 노란색 글씨 왼쪽 끝에 있는 '|' 모양은 대체

2022년 5월 11일
·
0개의 댓글
·

음수 여백 사용

웹페이지를 스타일링할 때 트로피 이미지를 네모의 위쪽 부분의 중간으로 옮기고 싶다면 음수 여백을 사용한다.사실 이미지도 인라인 요소인데, 인라인 요소는 수직여백 입력이 불가능했다. 하지만 인라인 요소에는 두 가지 예외가 있다고 한다.대체 인라인 요소: 이는 요소 그 자

2022년 5월 10일
·
0개의 댓글
·

클래스 이용하기

클래스는 같은 스타일을 적용할 특정 요소들을 지정할 수 있다. 또한 id와는 다르게 여러 번 사용할 수 있다.와 같이 class 속성을 정의한 후 CSS파일에서 처럼 클래스를 지정하여 사용하면 된다. 하지만 처럼 결합자와 클래스가 겹칠 때는 우선순위 개념이 적용된다.

2022년 5월 9일
·
0개의 댓글
·

웹사이트 구조

HTML에서는 의미가 중요하다. Body에는 웹사이트의 실제 내용이, h1에는 제목이 있듯이 HTML은 요소 내부에 있는 정보를 브라우저에 제공한다.웹사이트가 커진 오늘날에는 요소와 관련된 정보뿐만 아니라 요소의 위치 혹은 영역과 관련된 정보가 있어야 한다. 이를 위해

2022년 5월 8일
·
0개의 댓글
·

리스트 사용하기

에서 는 서로 관련된 정보들이 들어있다. 정보들을 단락으로 표시해도 되긴 하나 이는 의미론적 관점에서 옳다고 할 수 없다. 그러므로 리스트 요소를 사용한다. 의미론적인 관점에서 리스트를 사용한다는 점이 중요하다고 한다. 리스트 요소는 두 종류가 있고 두 개의 스타

2022년 5월 8일
·
0개의 댓글
·

공유 CSS파일 사용하기

CSS파일 간의 중복 내용이 많아질 경우, 두 HTML파일에서 모두 사용하는 CSS에 대한 공유 CSS파일을 사용하면 전체적으로 사용되는 코드를 줄일 수 있다. 그 후 다른 페이지에는 필요하지 않은 스타일을 추가할 특정 파일을 만들면 된다.Visual studio co

2022년 5월 8일
·
0개의 댓글
·

파일 이름 규칙

HTML이나 CSS파일의 이름을 지을 때 쓰는 규칙을 배웠다.기본 HTML파일의 이름은 관례적으로 index.html로 만드는 것이 좋다.HTML파일의 경우 일반적으로 로드될 페이지의 주요 목적이나 내용을 설명하는 이름을 지정하는 것이 좋다. 예를 들어 많은 온라인 상

2022년 5월 8일
·
0개의 댓글
·

HTML파일 추가하기

다른 HTML파일을 추가하려면 단순히 visual studio code에서 새로운 html파일을 생성하면 된다. 나는 full-week.html파일을 생성하였다.이제 HTML의 기본 뼈대인 , , 등등을 다시 입력해야 하는데, 여기서 visual studio code

2022년 5월 8일
·
0개의 댓글
·
post-thumbnail

페이지 배경 스타일링

눈에 보이는 것들을 스타일링하므로 CSS의 body선택자에서 코드를 작성한다.페이지에 여백 추가하기\->margin속성을 사용한다.배경 스타일링\->Background-color 속성을 사용한다.배경색이 바뀌었고, 여백이 추가되었다. 딱히 정리할게 없다..

2022년 5월 8일
·
0개의 댓글
·

이미지 스타일 지정

이미지에 스타일을 지정해주기 위해 CSS파일에서 img선택자를 선언한다.width와 height속성을 사용한다. 속성값으로는 이번에도 px를 주었다.Border-radius 속성을 사용한다. 이는 요소의 테두리(border)의 모양을 바꾼다. 테두리는 각 요소가 끝나

2022년 5월 7일
·
0개의 댓글
·

페이지에 이미지 추가하기

이미지는 웹사이트에서 눈에 보이는 것이기 때문에 head가 아닌 body섹션에 추가해야 한다.새로운 요소인 img를 사용하자. 이 또한 빈 태그이기 때문에 종료 태그가 없다. 추가한 후에는 source를 의미하는 src속성을 추가한다(Href도 가능한 것 같은데 관습적

2022년 5월 7일
·
0개의 댓글
·

공백과 특수문자 처리

예외가 있지만 브라우저는 기본적으로 HTML과 CSS에서 줄바꿈과 들여쓰기를 무시한다. 그렇기에 이 두 코드는 완전히 똑같은 결과를 준다. 하지만 개발자는 사람이므로 많은 들여쓰기와 줄바꿈을 이용하여 코드를 구조화하는 것이 좋다."<", ">" 문자 또는 전체 H

2022년 5월 7일
·
0개의 댓글
·