반응형 HTML7 [HTML] <button>이 <form> 안에 있는 경우 [HTML] 이 안에 있는 경우 이 안에 있는 경우 클릭했을 때 'submit'이 실행된다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 위와 같이 안에 있는 은 type이 'submit'인 과 동일하다. 은 안에 있을 때 type의 기본값이 'submit'이 된다. 따라서 버튼을 클릭했을 때 'submit'이 발생하지 않게 하기 위해서는 type을 'button'으로 지정해주면 된다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 2023. 11. 15. [HTML] 요소 사이의 공백과 해결법 [HTML] 요소 사이의 공백과 해결법 HTML의 요소 중 'inline-block' 태그에는 문제가 있다. 요소 사이에 공백이 발생한다는 것이다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 코드의 문법에 따라 다른 결과가 나타난다. 'span1'과 'span2'는 붙어 있는 반면에 'span3'와 'span4' 사이에는 공백이 있다. 공백이 나타나는 현상은 태그뿐만 아니라 , 등에서도 나타난다. 요소 사이에 공백이 발생하는 현상은 CSS로 요소들의 속성을 선언할 때에 어려움을 줄 수 있다. 위 코드의 첫 번째 줄처럼 한 줄에 태그를 이어 붙이면 공백을 없앨 수 있지만 가독성이 떨어진다. 이 문제를 해결할 수 있는 방법은 다음과 같다. 한 .. 2023. 11. 6. [HTML] 특수문자 엔티티(Entity)와 예약어(Reserved Word) [HTML] 엔티티와 예약어 예약어 (Reserved Word) 프로그래밍 언어에서 문법적인 용도로서 사용되도록 미리 정해진 언어이다. HTML에서는 대표적으로 ''가 있다. "문단을 나누는 태그"를 입력하기 위해 아래와 같은 HTML코드를 만들었다. 문단을 나누는 태그 하지만 결과물은 다음과 같다. 문장 안에 있는 ''를 웹 브라우저는 태그로 인식했다. ''는 HTML 내에서 태그를 나타내는 것으로 약속되어 있기 때문이다. 예약어를 사용하면 웹 브라우저는 우리의 의도와는 다르게 해석할 수 있다. 엔티티 (Entity) HTML 예약어를 HTML에서 적용되는 의미가 아니라 기존에 있던 문자 그대로를 표현하기 위해 있는 것이 엔티티이다. 엔티티 코드의 형태는 "&엔티티이름;", "&#엔티티숫자;" 두 가지.. 2023. 11. 1. [HTML] 기본 구조 [HTML] 기본 구조 모든 HTML 문서가 가지는 기본적인 표준화된 구조는 다음과 같다. 문서(document)의 타입(type)을 명시하는 선언문이다. DOCTYPE은 HTML 문서에서 최상단에 위치하여 가장 먼저 선언되어야 된다. HTML의 최신 규격, HTML5 버전을 사용하고 있음을 브라우저에 알리는 것이다. 브라우저가 표준 방식으로 처리하게 해주고 버전에 따라 호환되는 태그도 다르기 때문에 반드시 선언해준다. (만약 안하면 내가 생각한 것과 다르게 브라우저가 자기 멋대로 해석할 수도 있다.) HTML 문서의 최상위 요소이다. 하나의 데이터를 설명하는 데이터인 메타데이터(metadate) 요소이다. 태그에서 정의된 메타데이터는 브라우저나 다른 웹에서 사용하게 된다. 페이지 상에 보이지 않는 내용.. 2023. 10. 30. 웹 기술 백과사전 MDN 웹 기술 백과사전 MDN MDN(Mozilla Developer Network) https://developer.mozilla.org/ko/ 개발자가 개발자를 위해 만든 사이트 HTML, CSS, JS의 백과사전이다. 여러 지침과 안내가 가득하다. HTML의 모든 태그들과 어떻게 적용되는지 나타내준다. (물론 CSS, JS 내용도 가득가득하다.) 예제는 자신이 직접 수정해보고 그 결과를 바로 확인해 볼 수 있다. 사이트 내에 검색 기능이 있지만 나는 구글에 검색한다. MDN에는 개발자들에게 도움이 될 수 있는 최신 정보가 업데이트 되기 때문에 수시로 들어가서 확인해 보는 것도 좋다고 한다. (난 아직 왕초보라 잘 모르겠다..) 2023. 10. 30. [HTML] 파일 열기 [HTML] 파일 열기 확장자가 ".html"인 파일 여는 법 목적에 따라 두 가지로 나눈다. 1. 편집 2. 결과물 확인 1. 편집 웬만하면 에디터를 이용한다. 나는 VS Code를 사용한다. 메모장에서도 편집이 가능하다. 2. 결과물 확인 웹 브라우저를 이용한다. 아무 브라우저나 쓰면 된다고 하지만 대부분 크롬을 추천하니까 나도 크롬 사용한다. html 파일에 " 우클릭 >> 연결 프로그램 "에서 웹 브라우저를 선택한다. 아니면 웹 브라우저를 켜놓고 파일을 드래그로 끌어 놓으면 된다. 2023. 10. 30. HTML/CSS/JS의 역할 HTML/CSS/JS의 역할 HTML, CSS, JS는 프론트엔드(Front-End) 개발을 위해 반드시 필요한 언어이다. 쉽게 말해 웹 사이트, 우리 눈에 보이는 영역을 구성하기 위해 반드시 필요하다. 프론트엔드 개발을 위해서는 이 세 가지 언어만 공부하면 된다. 이것들 외에 필요없는 것이 아니라 이것들 밖에 없다. 다만, 서로 대체 할 수 있는 것이 아니고 서로 어우러져서 하나가 되기 때문에 이 세 가지 중 하나라도 빠져서는 안된다. 한 문장을 예로 들어본다. " 왕초보 개발자는 공부한다. " 이 문장에서 HTML, CSS, JS가 어떤 역할을 맡는지 알아본다. HTML (HyperText Markup Language) 하이퍼텍스트(Hypertext)의 구조를 명시하는 언어(Markup Languag.. 2023. 10. 29. 이전 1 다음 반응형
