프로그래밍 공부 노트

  HTML에서 몇몇 특수문자를 사용하려고하면 아래와 같이 오류가 발생한다. html은 "< " 와 같은 특수문자를 사용하면 태그를 작성하려고 한다고 생각해서 이와 같이 오류가 발생된다. 나는 태그를 작성하려는게 아니라 단지 방향을 표시하고 싶은건데 말이다. 위와 같은 특수문자를 화면에 동일하게 출력하면서 위 처럼 오류가 발생하지 않게 해주는것이 HTML 엔티티(entity)이다. HTMl entity를 사용해서 아래와 같이 작성하면 우리가 위에서 작성한것과 같이 "<- 이쪽 방향을 봐주세요"가 화면에 동일하게 출력되는것을 확인할 수 있다. < p > &lt; - 이쪽 방향을 봐주세요. </ p > ; 특수문자 뿐만아니라 공백(띄어쓰기)과 같은 문제도 HTMl entity를 사용해서 해결 할 수 있다.  < p > &lt; - 이쪽 방향을 봐주세요. </ p > ; 위와같이 html을 작성해도 우리 화면에는 "<- 이쪽 방향을 봐주세요" 이렇게 텍스트가 붙어서 출력된다. 이런 공백(띄어쓰기)를 표현하기 위해서는  &nbsp; 엔티티를 사용하면 된다. < p > &lt; - &nbsp;&nbsp;&nbsp;&nbsp; 이쪽 &nbsp;&nbsp;&nbsp;&nbsp; 방향을 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 봐주세요. </ p > ; 이렇게 작성해주면 우리가 원하던대로 "<-             이쪽          방향을        봐주세요" 이렇게 공백(띄어쓰기)을 제대로 화면에 출력하게 된다. 이외에도 다양한 문자들을 아래 문법...

  데이터 속성 ( data-set, data-* ) 데이터 속성은 DOM 요소에 데이터를 저장할 수 있고, 해당 데이터를 event.target.dataset.정의한이름 으로 해당 값에 접근하여 값을 다룰 수 있다. 사용 방법은 DOM 요소에 속성으로 data-원하는이름 을 작성하면 된다. < span id ={ item . id } data-content ={ item . content } role = " presentation " onClick ={ handleModifyComment } style ={{ cursor : ' pointer ' }} > 수정 </ span > 주의할점 data- 뒤에 불가능 대문자 영어 data- 뒤에 가능 소문자 영어, 하이픈( - ), 언더스코어( _ ), 피어리드( . ), 콜론( ; ) 예전에 배웠을 당시에 따로 정리는 하지 않았는데 프로젝트를 진행하면서 아주 유용하게 사용해서 정리를 했다.

지금까지 태그와 요소가 동일한것으로 알고있었다. 그러니까 동일한것을 가리키지만 부르는 방식이 두가지라고 알고있었다. 당연히 그러려니하고 넘어갔는데 이제와서 갑자기 궁금해서 찾아보니 두가지는 조금 달랐다. HTML 관련 강의나 내용들을 보면 태그와 요소라는 용어를 자주 접하게 된다. 비슷해보이지만 두가지는 조금 다르다. 태그는 말 그대로 태그 자체를 가리키는 반면, 요소는 태그가 적용된 것을 가리킨다. < p > Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse provident cumque quam cupiditate laboriosam, nostrum accusamus! Cum enim doloremque tempora aperiam sed vel, quia laborum facere ullam quam odio sapiente! </ p > 이 소스에서 <p></p> 가 태그이며 시작태그와 종료태그 사이에 작성된 텍스트가 p 요소이다.

＆nbsp; ＆amp; ＆lt; ＆gt; ＆quot; 의미와 사용법 ＆nbsp;  " " : 공백(스페이스 한 칸)을 의미한다. 띄어쓰기를 할 때 키보드의 스페이스키를 한 번 눌러 "공백 문자" 즉 빈 칸을 한 개 삽입한다. 그런데 HTML 문법에서는, 일반 텍스트 편집에서와 달리, 공백 2개를 연속으로 사용해도 2칸을 띄어쓸 수 없다. 공백을 아무리 많이 삽입해도 공백 1개로 간주된다. 그래서 공백을 여러 개 사용해야 할 때는 빈 칸을 &nbsp; 이렇게 표현해 준다. 그러면 브라우저가 &nbsp; 기호를 빈 칸으로 표시해 준다. ＆amp;  앰퍼샌드(&) 기호는 특수한 용도로 사용되고 있다. 그래서 & 기호 자체를 표현해 주기 위해서는 & 를, &amp; 이렇게 표기해 주어야 한다. ＆lt;  부등호(<) 괄호로 사용되기도 하고, 수식에서 "무엇보다 적다(Less Than)"는 의미로 사용되기도 하는 기호이다. 그런데 < 기호는 HTML 파일에 직접 사용할 수 없다. 물론 사용해도 브라우저가 알아서 자동으로 처리해 주지만 나중에 에러가 날 수 있다. 왜냐하면 < 기호는 HTML태그를 둘러싸는 기호이기 때문이다. 제목이 <여기에> 표시됩니다 라는 문자열을 <h1></h1> 태그 안에 넣을 때, <h1>제목이 <여기에> 표시됩니다</h1> 라고 하면 <여기에> 라는 것도 하나의 HTML태그로 간주되어 버린다. <여기에> 라는 태그는 없기에 이것은 오류를 발생한다. 따라서 < 기호를, &lt; 이렇게 표기하면 태그와 혼동되지 않고 부등호가 잘 표현된다. ＆gt;  부등호(>) 위의 경우와 같다. 닫는 괄호 또는, "무엇에 비해 크다(Greater...

시맨틱이란 '의미론적' 이라는 뜻을 가지고 있다. 이러한 시맨틱과 태그가 만나 시맨틱 태그라는 이름이 만들어졌다. 시맨틱 태그란 태그만 보고도 브라우저와 개발자 모두에게 페이지 구조를 쉽게 이해할 수 있도록 정의된 태그를 말한다. 이렇게 시맨틱 태그를 사용하여 구조화한 웹을 시맨틱 웹이라고 한다. 일반 html 태그를 사용하여 페이지 구조를 잡아도 되지만 시맨틱 태그(sematic tag)를 사용하는 몇가지 이유가 있다. 첫번째. 검색엔진이 html 코드를 확인하고 그 의미를 해석하고 인지하여야하는데 이때 시맨틱 태그(semantic tag)를 사용하면 검색엔진이 보다 쉽게 웹 문서를 파악하여 보다 정확하게 검색하는데 도움을 준다. 동일한 디자인의 제목이라고 할지라도 h1 태그를 사용한 제목과 div 태그를 사용하여 동일한 외형을 가진 제목은 외형만 같은뿐 검색엔진이 인식하는 내용은 전혀 다르다. 두번째, 어떠한 장애가 있더라도 웹사이트를 이용하는데 불편을 없게하기 위해서이다. 웹 접근성 시각에서 볼 때 시맨틱 태그는 매우 중요하다. 시각장애인들은 웹사이트를 이용할 때 화면 낭독기 같은 웹 보조 도구를 이용하는데 이때 시맨틱 태그를 통해  어느 부분이 제목이고 내용인지 구별할 수 있으므로 그만큼 사이트 내용을 정확히 전달할 수 있기 때문이다. 또한 태그에 대한 역할이 정확히 정해져있기 때문에 어떤 장치에서든 문서를 똑같이 해설할 수 있다. HTML5에서 새롭게 추가된 시맨틱 태그들이다. 1. header : 헤더를 의미한다 2. nav : 내비게이션을 의미한다 3. aside : 사이드에 위치하는 공간을 의미한다 4. section : 본문의 여러 내용(article)을 포함하는 공간을 의미한다 5. article : 분문의 주내용이 들어가는 공간을 의미한다 6. footer : 푸터를 의미한다 section 안에 article 뿐만 아니라 nav(메뉴), main(본문), aside(광고)등으로 구성되기도 ...

이미지를 클릭하면 특정 url 주소로 이동하도록 할 수 있다. 그런데 한 이미지를 가지고 클릭 위치에 따라 서로다른 url 주소로 이동하게도 할 수 있다. 이것을 이미지 맵 이라고 한다. 이미지 맵은 이미지에 영역을 만든 후 링크를 추가해야한다. 사용법은 아래와 같다. < map name = "맵이름" > < area > < area > ... .... </ map > < img src = "이미지 파일" usemap = "#맵이름" alt = "이미지설명" > usemap 속성에 #을 붙여야 하며 map 태그의 name 속성과 이름을 동일하게 작성해야 한다. 실제 사용 예제를 보면 < map name = "kurly" > < area shape = "rect" coords = "0,0,100,100" href = "https://www.naver.com" alt = "네이버" /> </ map > < a href = "https://www.kurly.com/shop/event/kurlyEvent.php?htmid=event%2Fjoin%2Fjoin_201223&%243p=a_custom_741527000799871056&%24deeplink_path=home&%24android_passive_deepview=false&%24ios_passive_deepview=false&%24fallback_url=https%3A%2F%2Fwww.kurly.com%2Fshop%2Fevent%2Fkurl...

<!doctype html> 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻이다. <html lang="en"></html> 웹 문서의 시작과 끝을 나타내는 태그이다.  웹 브라우저가 <html> 태그를 만나면 </html> 까지의 소스를 읽어 HTML 문법에 맞추어 브라우저에 표시한다. html 내용에 한글을 넣을것이면 en을 ko 로 수정 -->  <html lang="ko"> <head></head> 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분이다.  스타일 및 스크립트 등이 head 태그안에 포함된다. 문서에서 사용할 외부 파일들도 이곳에 작성한다. head 태그에서 가장 중요한 태그는 <title></title> 태그이다.  모든 웹 브라우저의 제목 표시줄에 표시되고 해당 페이지를 방문하는 방문자나 검색엔진은  제목 표시줄의 제목을 보고 페이지 전체의 내용을 추측한다. <body></body> 실제로 웹 브라우저 화면에 나타날 내용을 작성한다.  <meta charset="UTF-8">  문자 세트 지정하기.  웹 브라우저에게 UTF-8 형식의 글자 인코딩을 알려주는 정보이다. ​ <meta name="viewport" content="width=device-width, initial-scale=1.0"> 모바일 기기 고려하기.  웹 브라우저를 표시하는 기기(모바일 폰, PC등) 의 사이즈에 따라 맞추는 기능 ​ <meta http-equiv="X-UA-Compatible" content="ie=edge"> 인터넷 익스프로러 브라우저 고려하기. 인터넷 익스플로러 브라우저에게 호환성을 가장 최신버전으로 맞추어 표시하라는 기능 검색엔진 고...

a 태그를 통해 만들어진 링크는 무조건 외부 페이지로만 이동하는것은 아니다. a 태그를 사용하여 페이지 내부의 특정 요소로 이동할 수 있는데 이를 내부 링크라고 한다. 내부링크는 사용할 때 href 속성값으로 #을 작성하고 그뒤에 이동하고자하는 요소의 id 속성 값을 작성한다.   < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document </ title > </ head > < body > <!-- 링크를 클릭하면 href 속성에 #과 같이 작성된 값과 동일한 id 값을 가진 태그로 이동한다. --> < a href = "#1" > 1번 내용으로 이동 </ a > < a href = "#2" > 2번 내용으로 이동 </ a > < a href = "#3" > 3번 내용으로 이동 </ a > < a href = "#4" > 4번 내용으로 이동 </ a > < a href = "#5" > 5번 내용으로 이동 </ a > < h1 id = '1' > 1번 </ h1 > < p > Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit libero est i...