전체태그 보기

#html (88개의 포스트)

awesomelon
만약 프론트엔드 개발자라면 이미지를 불러와 높이 값에 따라 레이아웃을 변경할 때가 있을 것이다. 예를 들어 이런 코드가 있다고 가정해보자 결론 이미지는 로드되고 난 후에 컨트롤 해야 한다.
lukawitch

HTML SementicTag 종류

6일 전0개의 댓글
Sementic 태그 레이아웃만을 위해 사용되는 태그이다. 태그자체에는 큰 의미가있지는 않다. 기능은 DIV하고 같다. img src="./sementic.png" header태그 (sementic 태그1) 페이지 제일 하단부분을 작업할 때 사용한다.
lukawitch
대부분 태그에 들어가는 요소 1. style: css를 적용시켜주는 요소이다. 2. class: 외부의 css코드에서 class로 정의된 요소를 적용시켜준다. css편에서 더 자세하게 다룰 예정이다. 3. id:그 태그만의 고유의 이름을 가지게 하는 것이다. a태그 HTML에서 가장 많이 사용하는 태그중 하나가 a태그이다. 웹사이트에 링크를 걸어주...
awesomelon
오늘은 swiper.js로 만든 슬라이더들안에 youtube영상을 넣어보는 것을 알아보고자 한다. 기본적인 swiper를 생성하는 방법은 이 링크로 들어가면 자세히 알 수 있다. index.html 이것으로 swiper안에 youtube넣기를 마치겠습니다 :)
awesomelon
초 간단 팁 img 태그에 css translate를 줄 때 img의 가로,세로 중 하나라도 홀수면 이미지가 흐릿해진다. 만약 translateX 를 준다면 가로는 무조건 짝수여야하고 반대로 translateY면 세로는 무조건 짝수여야한다. 간단하게 해결하려면 image를 background로 넣어주면 된다.
awesomelon
입력 폼 개발 시 사용자가 input에 한글만 적게 하고 싶을 때가 있다. 처음엔 이런식으로 하면 될 줄 알았지만 keypress로 적용하니 정상 작동하였다. 결론 한글 입력 시 이벤트를 걸려면 keyup 말고 keypress !!!!
chajanee

D+10 TIL ► HTML + CSS + JS (수정중)

2019년 12월 4일0개의 댓글
clone coding / ⭐️stagram - login page 작업중.. 세로는 멀쩡한데 창을 줄였을 때, 가로가 깨지는 현상 발생! WHY❓ = 가로 안주고 스크린샷 2019-12-04 오후 9.12.50.png...
sbinha

HTML기초

2019년 12월 1일0개의 댓글
기초
chloe

Coding Convention

2019년 11월 28일0개의 댓글
코딩 컨벤션이란? 코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 코딩 스타일 규약이다. 코딩 컨벤션은 왜 필요한가? 여러 개발자가 협업해야하는 상황에서 일종의 규약이 있다면, 유지보수 및 가독성이 좋아져, 협업이 쉬워진다. 특히, 자바스크립트의 경우 다른 언어의 비해 문법구조가 유연하기 때문에, 통일된 규약이 없다면 오류를 찾기 어렵게 된다. ...
meekukin

[HTML] images

2019년 11월 27일0개의 댓글
Images Syntax & the alt attribute - img contains attributes only, and doesn't have a closing tag. - The alt attribute provides an alternate text for an image, if the user cannot view it. The value of...
hojw1019

[HTML] Flex 연습 사이트

2019년 11월 11일0개의 댓글
https://flexboxfroggy.com/ko
nudge411

CodePen HTML 자동완성 기능

2019년 11월 9일0개의 댓글
패스트캠퍼스 프론트엔드 강좌에서 코드펜 툴을 사용하는데 조금은 불친절한 강의 약간 감정이 상해서 급하게 작성한다. 여기서 갑자기 스크린샷 2019-11-09 오후 3.36.56.png 스크린샷 2019-11-09 오후 3.39.21.png 이렇게 되거나! 아니면 ![스크린샷 2019-11-09 오후 3.4...
재귀함수(recursion)을 활용해 getElementsByClassName 구현하기
devmin
재귀함수(recursion)를 활용해 getElementsByClassName() 메소드를 구현해봤습니다.
lukawitch

[HTML]HTML기본코드 작성

2019년 10월 28일0개의 댓글
프론트엔드에서 가장 기본적으로 알아야할건 바로 HTML이다. 웹분야로 가려면 이 HTML은 기본적으로 알아야한다. HTML5 설정 html5를 사용하려면 문구 제일 위에다가
devmin
코드스테이츠 미니 해커톤 시간에 만들기 시도해 본 POS를 혼자 다시 만들어 보던 중이었다. 기억을 되새겨가며 하나하나 만들어가고 있었는데, 뭔가 말도 안되는 상황이 발생했다... logic.js 에서 메뉴 버튼을 만드는 함수를 만들어 놓고, html이 실행되는 즉시 실행되도록 코드를 작성해 놨는데, 아무리 다시 해봐도 작동이 안하는거다... 함수나 함...
sseo

HTML 용어

2019년 10월 26일0개의 댓글
rich HTML: 서식 있는 HTML 배경, 테두리, 텍스트 글꼴, 텍스트 스타일, 텍스트 색상 같은 서식이 포함된 HTML optimized HTML: 최적화된 HTML 불필요한 서식이나 태그가 없는 HTML 코드 HTML sanitization: HTML 삭제 HTML 스트링을 검사하여 안전하지 않거나 악의적 공격에 취약한 태그를 삭제하는 과정 ...
devzunky

TIL no.19 - window.getComputedStyle

2019년 10월 10일0개의 댓글
element의 style 태그 내에 있는 속성들의 값을 읽기위해 사용하는 method입니다. element.style."attribute"의 경우, 특정 값을 할당할 때는 사용할 수 있지만 현재 element.style."attribute"내에 들어있는 값을 읽어오는 것은 불가능하기 때문입니다. * 1. 문법 let style = window.g...
devzunky
사용자와 웹페이지 간의 상호작용하는 모습을 예제를 통해 HTML/CSS/JavaScript가 어떻게 쓰이는지 포스팅하겠습니다. * 1. Log-in 버튼 활성화 1-1. 소스 코드 HTML 기본 클래스였던 unactivatedLoginColor가 삭제되고 activatedLoginColor가 추가된 것을 확인할 수 있습니다. * 실제...
devzunky
HTML/CSS에서 div 3개를 나란히 정렬하는 방법에 대해 포스팅하겠습니다. ** 결과 스크린샷, 2019-10-04 17-55-47.png 가운데 요소에 margin값을 줘서 1번 방법과 같은 결과가 나오도록 했습니다. flex는 부모요소의 display를 flex로 설정하고 자식요소의 flex값을 설정하는 방법입니다....
holab

Perceivable <대체 텍스트>

2019년 10월 1일0개의 댓글
검사항목 (적절한 대체 텍스트 제공) 텍스트가 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다. IR기법 .blind{position:absolute;line-height:0;overflow:hidden;} .blind{position:absolute;top:-1000em;line-height:0;overflow:hid...