본문 바로가기
  • Coding & Book

WEB/HTML59

[HTML5] target 속성과 src 속성에 대해 자세하게 알아보자 target 속성과 src 속성을 자세하게 알아보자 target 속성 target 속성은 a 태그로 링크를 생성할 때 대상이 연결 되는 방식을 지정합니다. 속성값으로 _blank, _parent, _self, _top 을 사용할수 있습니다. 가장 많이 사용 하는 것은 _blank 로 알려져 있습니다. target 속성값 _blank 는 새 창으로 열리는 방식입니다. _parent 는 기존창의 부모 창에서 새 창이 열리는 방식입니다. _self 는 기존창에 그대로 웹페이지를 여는 방식입니다. _top 은 현재 열려져있는 창의 최상위 인터넷 창에서 열리는 방식입니다. src 속성 src 속성은 삽입하려는 이미지의 경로를 입력하는 속성입니다. 여기서 이미지 경로를 현재 폴더로 할지 상위폴더로 할지 정할 수 있.. 2023. 5. 17.
[HTML5] placehorder 와 required 속성 에 대해 알아보자 placehorder 속성 아이디나 패스워드를 입력하려고 보면 흐릿한 글씨로 "입력하세요"로 나와 있는 경우가 있습니다. 이때 사용하는것이 placehorder 입니다. form 형식에서 placehorder="아이디를 입력하세요" 을 사용했을 경우 사용자가 뭔가를 입력 하기 전까지 입력이라는 글이 나오게 됩니다. required 속성 회원 가입시 사용자의 이름 비밀번호등을 입력 받는데 이는 꼭 입력해야 합니다. 이를 required 속성을 이용해서 빈칸이 되는것을 방지할수 있습니다. 또한 required 는 조건에 맞지 않으면 제출이 안되게 할수도 있습니다. 예시로 나이가 18세 이상 60세 미만 일 경우만 작성하게 하고 이보다 작거나 클경우는 입력이 막히게 됩니다. 나이: 2022. 12. 22.
[HTML5] Emmet 으로 작업흐름을 개선해보자 Emmet이란 HTML 과 CSS를 빠르고 효율적으로 작성하기위해 코드를 단축시켜 특정 단축키를 통해 확장하여 완전한 코드로 변환시켜주는 것 입니다. 아래에서 예시들 몇개를 보겠습니다. Child: > 부모와 자식 요소간의 관계를 나타냅니다. nav>ul>li 입력 후 Tab 또는 enter를 누르게 되면 로 바뀌게 되는것을 알 수 있습니다. Multiplication: * 요소를 반복하는데 사용합니다. ul>li*5 입력 후 Tab 또는 enter를 누르게 되면 * 옆에 숫자수 만큼 list가 만들어지는 것을 알 수 있습니다. Sibling: + 형제요소를 나타냅니다. div+p+bq 입력 후 Tab 또는 enter를 누르게 되면 div+p+bq 가 되는것을 알수 있습니다. TIP) 더 많은예시들은 아.. 2022. 12. 20.
[HTML5] 문서 구조화 (div와 span) 에 대해 알아보자 문서구조화 HTML 문서 구조화는 웹페이지를 의미 있는 블록으로 분할하고 구성하는 과정을 말합니다. 콘텐츠를 조직화 하고 가독성을 높이는데 도움을 줍니다. div 태그 태그로 공간을 블록 형식으로 분할할수 있습니다. 문서 내에서 영역을 구분하거나 그룹화 하기 위해 사용합니다. div태그로 분할 div태그로 분할 div태그로 분할 div태그로 분할 div태그로 분할 span 태그 태그로 공간을 인라인 형식으로 분할합니다. 특정 부분을 그룹화 하기위해 사용됩니다. span 태그로 분할 span 태그로 분할 span 태그로 분할 span 태그로 분할 span 태그로 분할 각 태그 형식 시맨틱 태그 특정 태그에 의미를 부여한 것입니다. LOUI3 Example HTML 루이3 2022. 12. 9.
[HTML5] 간단한 입력 양식을 만들어보자 입력양식 사용자에게 정보를 입력받고 싶을때 사용합니다. 쓰는 방법으로 태그로 영역을 생성하고 안에 태그를 넣으면 됩니다. form 태그 태그에서 method 속성으로 데이터를 전달하고 action 속성으로 데이터를 전달이 가능합니다. (이는 서버에서 데이터를 처리하기 위해 사용 하는 것 이므로 적절하게 사용 해주시면 됩니다.) method의 전송 방식 method 속성은 전송방식 중 get 방식과 post 방식을 많이 사용합니다. get 방식은 주소에 데이터를 입력하여 전송하는 것이고 , 주로 데이터를 가져올때 많이 사용합니다. post 방식은 비밀스럽게 데이터를 전송하는 것인데 주로 데이터를 제츨하거나 변경하게 될때 많이 사용합니다. 아래 코드는 post 방식의 예시입니다. 유저가 이름과 비밀번호를 입.. 2022. 12. 8.
[HTML5] HTML 태그들에 대해 알아보자 html에서 태그html에서 태그는 마크업 언어로 사용됩니다. 또한 웹페이지의 요소들을 정의하고 표시 하는데에 사용 하는데 이를 더 자세하게 알아보겠습니다. 앵커 태그a 태그는 anchor을 의미하며 하이퍼링크(Hyper Link) 를 생성할때 사용합니다.hyper는 hyper reference를 의미 하며 이동할 웹페이지의 경로를 나타냅니다.사용 방법: 출력글자 IT를 좋아하는 초보자의 기록장 네이버 글자모양 태그글자모양 태그는 단독으로도 사용하고 제목,본문 글자 태그 내부에도 입력 가능 합니다.하지만 글자모양 태그 내부에 제목,본문 글자 태그 입력 불가능 합니다.---사용태그들--- - 굵은 글자를 나타내고 싶을때 사용 합니다. - 기울어진 글자를 나타내고 싶을때 사용 합니다. - 작은글자를 나타내고.. 2022. 12. 7.