요소에는 블록요소와 인라인요소라고 하는 개념이 존재한다. 블록요소 블록 요소는 모든 인라인 요소를 포함할 수 있고, 다른 블록 요소도 일부 포함 할 수 있다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있다. 그리고 블록 요소 다음에는 줄바꿈이 이루어진다. 1. 줄 바꿈이 일어남. 2. 블록 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음. 3. 블록 요소 안에 또 다른 블록 요소를 포함할 수 있음. (단, 예외도 존재함) 종류 address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figca..

비정렬 목록 태그 : 요소는 정렬되지 않은 목록(unordered list ) 즉, 순서가 중요하지 않은 목록을 나타낼 때 사용한다. 요소 안에 들어갈 항목의 순서를 바꿨을 때 그 목록의 의미도 바뀌게 된다면 이 아닌 태그를 사용하는 것이 바람직하다. 과 의 직계 자식 요소로는 오직! 요소만 올 수 있다. 요소는 밑에서 보다 자세히 다루겠지만, 목록 안의 항목으로, 과 요소는 최소 하나 이상의 요소를 자식으로 가져야 한다. 목록의 항목 태그 : 요소는 목록 안의 아이템(항목)(list item)을 나타낸다. 따라서 반드시 목록을 나타내는 혹은 요소 안에 항목으로서 요소가 위치해야 하는 것이다. 아니 다 알겠는데, 순서가 중요하다는 게 무슨말인데? 라고 하는 사람들을 한번에 이해시켜줄 좋은 예를 가져왔다...

Position 속성 4가지 static relative fixed absolute 1. Static 따로 정하지 않아도 모든 박스(태그)들은 position:static으로 지정되어있다. 태그를 작성한 순서대로, 위에서 아래로~ 왼쪽에서 오른쪽으로~ 배치되는 특징이 있다. 2. Relative 현재위치(static)를 기준으로 좌표속성을 사용하여 위치를 이동시킨다.(top, bottom, left, right) 좌표속성(offset) top : 10px 위에서부터 10px 만큼 아래로이동 left : 10px 왼쪽에서부터 10px 만큼 오른쪽으로 이동 bottom : 10px 아래에서부터 10px 만큼 위로이동 right : 10px 오른쪽에서부터 10px 만큼 왼쪽으로 이동 3. Fixed 브라우저의..

로그인페이지 구현 중 필요했던 특수문자 입력방지 기능 Input 태그란? Form 태그 안에서 추가되는 입력 요소들 중 가장 중요한 태그. 사용자로부터 정보를 받아들이는 용도로 사용되는데 Input 태그의 type이라는 속성을 이용해 입력 양식을 여러가지로 변경하여 사용한다. 버튼태그 위에는 버튼태그로 만든 버튼이고 아래는 인풋태그로 만든 버튼이다. ( 처음알았어..ㅠㅠ) 속성으로는 type / value / name 을 썼는데, type : 입력태그 유형 value : 입력태그 초기값 ( 사용자가 변경가능 ) name : 서버로 전달되는 이름 ( 서버로 전달되기때문에 협업시 프론트와 백과 소통 후 이름을 정한다) type 속성값 내용 샘플 text 텍스트를 입력하는 창을 생성합니다. password 비..

왼쪽에 있는 내용은 VS Code 에서 작업한 html 파일을 크롬에서 열어본 모습이다. 이번 포스팅은 위에서 사용된 태그들을 알아볼 예정이다! 요소는 HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 요소의 후손이어야 합니다. 요소는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있습니다. 요소는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다. 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시합니다. 요소는 HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 요소만 존재할 수 있습니다. – 요소는 6단계의 구획 제목을 나타냅니다. 구획 단계는 이 가장 높고 은..