THE 나은 웹사이트

1. input 태그 input태그는 입력요소로 사용자로부터 입력값을 받을 수 있다. input태그는 type의 속성값에 따라 동작방식이 달라진다. 텍스트 관련 type (1) type = "text" 디폴트 값으로 한 줄의 텍스트 필드를 생성한다. (2) type = "password" 값이 가려진 한 줄의 텍스트 필드를 생성한다.(비밀번호를 입력값으로 받을 때) (3) type = "search" 검색을 위한 한 줄의 텍스트 필드를 생성한다. (4) type = "tel" 전화번호를 입력할 수 있는 한 줄의 필드를 생성 이 4가지는 텍스트 관련 type 속성값으로 필요하다면 minlength(최소 길이), maxlength(최대 길이), placeholder(input창 안의 글씨) 등의 속성을 사용..

1. form태그란? form태그란 사용자부터 입력을 받는 태그들을 감싸는 양식 태그이다. form태그 내부에 있는 input태그에 글자나 숫자를 입력하거나 체크박스, 라디오에 버튼을 클릭하고 제출 버튼을 누르면 받은 입력값들을 서버로 전달해 정보를 처리한다. 2. form태그의 action속성과 method속성 (1) 기본적인 form태그의 동작원리 1.사용자로부터 입력값을 받고 form안에 있는 데이터들을 웹 서버로 보낸다. 2. 웹 서버는 받은 데이터를 처리하기 위해 웹 프로그램에게 데이터를 넘긴다. 3. 웹 프로그램이 데이터를 처리하고 처리 결과에 따른 새로운 html파일을 웹 서버로 보낸다. 4. 웹 서버는 새로운 html파일을 브라우저에 보낸다. 5. 브라우저는 새로운 html파일을 사용자에게..

1. html 태그 속성 중 lang= 'ko'를 쓰는 이유? html을 작성할 때 !Doctype html 바로 뒤에 오는 태그가 태그이다. 이 html의 속성중 lang이라는 속성이 있는데 이 속성은 현재 페이지의 텍스트가 어떤 언어로 작성되어 있는지 표기하는 것이다. 시각적으로 불편함이 있는 분들은 웹페이지를 스크린 리더를 통해서 이용하는데 lang속성으로 표기한 언어를 기준으로 발음이 적용된다. 그렇기 때문에 lang속성은 웹 페이지를 보다 편리하게 이용할 수 있도록 하는 웹 접근성 관련 속성이다. 2. b태그와 strong태그, i태그와 em태그 1. b 태그 vs strong 태그 b태그와 strong태그를 적용한 텍스트는 웹 브라우저에서 볼 때 진하게 표시된다. 외관상으로는 둘의 차이가 없지..

html 태그를 작성하거나 css를 작성하고 웹브라우저에 내가 작성한 코드들을 볼 때 가끔 어떤 브라우저에서는 내가 의도한 대로 나타나지 않는 경우가 있다. 그 이유는 브라우저별로 지원할수 있는 태그들, 없는 태그들, 속성들이 존재하기 때문이다. 사용자들은 다양한 브라우저를 사용하고 있고 웹 개발을 할때 이를 고려해 코드를 작성하는 것이 중요하다. 브라우저별로 지원하는 태그들, 속성들을 확인해야 하는데 이것들이 유효하게 작동하는지를 알려주는 사이트가 있다. caniuse.com이라는 사이트인데 이런 식으로 Can I use 뒤에 써야 하는 태그들이나 속성들을 적으면 브라우저별로 지원하는 항목들이 나온다. 초록색으로 표시된 부분은 '지원' , 빨간색 부분은 '지원하지 않음' , 노란색 부분은 '일부지원',..

1. img태그란? img태그는 문서에 이미지를 삽입할 때 사용한다. 2. img태그 사용방법 img 속성값은 대표적으로 src와 alt가 있다. src 속성은 필수이며 이미지의 절대경로 또는 상대경로를 적어준다. alt의 경우 이미지를 제대로 불러오지 못했을 경우의 대체 텍스트이며 이미지를 설명하는 내용을 적어준다. -- 절대경로와 상대경로 절대경로 : 절대적인 위치를 가리키는 경로, 컴퓨터의 디렉토리에서는 C:\ 를 포함, URL에서는 http:// 를 포함 상대경로 : 작업 디렉토리를 기준으로 상대적인 위치를 가리키는 경로 절대경로의 경우 보통 외부 이미지 파일을 가져올 때 사용하고 상대경로는 내부 이미지 파일을 가져올 때 사용한다. 상대경로를 사용할 때 이미지를 삽입할 문서를 기준으로 이미지가 상..

1. Semantic Tag란? semantic은 '의미의'라는 뜻의 형용사이다. semantic tag는 의미를 가지는 태그를 의미한다. 2. Semantic Tag를 쓰는 이유? 웹사이트가 검색엔진에 노출되는 것은 매우 중요하다. 검색엔진은 로봇(Robot)이라는 프로그램을 이용하여 웹사이트의 정보를 수집한다(이것을 크롤링이라고 부른다) 정보를 수집한 다음 사용자가 검색할만한 키워드를 예상하여 검색 키워드에 해당하는 색인(index)을 미리 만들어둔다. 검색엔진이 수집한 정보는 html코드인데, html 코드의 시맨틱 요소들을 해석하게 된다. 검색엔진 노출 때문도 있지만, 개발자는 여러 사람들과 협업을 많이 하기 때문에 코드의 의미를 명확하게 해주는 것이 중요하다. 3. 기본적인 웹사이트의 구조 --..

1. meta 태그란? html은 크게 head태그와 body태그로 나뉜다. body태그와 다르게 head태그 같은 경우에는 브라우저에 직접적으로 표시되지 않는다. meta태그는 head태그 안에 들어가는데 웹페이지 그 자체의 정보를 제공하기 위한 목적으로 사용된다. meta 태그를 통해 검색엔진 최적화에 도움이 될 수 있다. meta 태그는 head 부분에 적혀져 있기 때문에 문서의 가장 처음에 읽히는 정보들이다. 그렇기 때문에 검색엔진에게 웹페이지가 이러한 내용들을 담고 있다고 알려주는 것이다. 2. meta 태그의 name과 content -- name의 속성값은 많지만 대표적으로 description, author, keywords 등이 있다. -- content는 name의 특성 값을 담는다. ..