만약 프론트엔드 개발자라면 이미지를 불러와 높이 값에 따라 레이아웃을 변경할 때가 있을 것이다. 예를 들어 이런 코드가 있다고 가정해보자 결론 이미지는 로드되고 난 후에 컨트롤 해야 한다.
Sementic 태그 레이아웃만을 위해 사용되는 태그이다. 태그자체에는 큰 의미가있지는 않다. 기능은 DIV하고 같다. img src="./sementic.png" header태그 (sementic 태그1) 페이지 제일 하단부분을 작업할 때 사용한다.
대부분 태그에 들어가는 요소 1. style: css를 적용시켜주는 요소이다. 2. class: 외부의 css코드에서 class로 정의된 요소를 적용시켜준다. css편에서 더 자세하게 다룰 예정이다. 3. id:그 태그만의 고유의 이름을 가지게 하는 것이다. a태그 HTML에서 가장 많이 사용하는 태그중 하나가 a태그이다. 웹사이트에 링크를 걸어주...
오늘은 swiper.js로 만든 슬라이더들안에 youtube영상을 넣어보는 것을 알아보고자 한다. 기본적인 swiper를 생성하는 방법은 이 링크로 들어가면 자세히 알 수 있다. index.html 이것으로 swiper안에 youtube넣기를 마치겠습니다 :)
초 간단 팁 img 태그에 css translate를 줄 때 img의 가로,세로 중 하나라도 홀수면 이미지가 흐릿해진다. 만약 translateX 를 준다면 가로는 무조건 짝수여야하고 반대로 translateY면 세로는 무조건 짝수여야한다. 간단하게 해결하려면 image를 background로 넣어주면 된다.
입력 폼 개발 시 사용자가 input에 한글만 적게 하고 싶을 때가 있다. 처음엔 이런식으로 하면 될 줄 알았지만 keypress로 적용하니 정상 작동하였다. 결론 한글 입력 시 이벤트를 걸려면 keyup 말고 keypress !!!!
clone coding / ⭐️stagram - login page 작업중.. 세로는 멀쩡한데 창을 줄였을 때, 가로가 깨지는 현상 발생! WHY❓ = 가로 안주고 스크린샷 2019-12-04 오후 9.12.50.png...
코딩 컨벤션이란? 코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 코딩 스타일 규약이다. 코딩 컨벤션은 왜 필요한가? 여러 개발자가 협업해야하는 상황에서 일종의 규약이 있다면, 유지보수 및 가독성이 좋아져, 협업이 쉬워진다. 특히, 자바스크립트의 경우 다른 언어의 비해 문법구조가 유연하기 때문에, 통일된 규약이 없다면 오류를 찾기 어렵게 된다. ...
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...
패스트캠퍼스 프론트엔드 강좌에서 코드펜 툴을 사용하는데 조금은 불친절한 강의 약간 감정이 상해서 급하게 작성한다. 여기서 갑자기 스크린샷 2019-11-09 오후 3.36.56.png 스크린샷 2019-11-09 오후 3.39.21.png 이렇게 되거나! 아니면 
재귀함수(recursion)를 활용해 getElementsByClassName() 메소드를 구현해봤습니다.
프론트엔드에서 가장 기본적으로 알아야할건 바로 HTML이다. 웹분야로 가려면 이 HTML은 기본적으로 알아야한다. HTML5 설정 html5를 사용하려면 문구 제일 위에다가
코드스테이츠 미니 해커톤 시간에 만들기 시도해 본 POS를 혼자 다시 만들어 보던 중이었다. 기억을 되새겨가며 하나하나 만들어가고 있었는데, 뭔가 말도 안되는 상황이 발생했다... logic.js 에서 메뉴 버튼을 만드는 함수를 만들어 놓고, html이 실행되는 즉시 실행되도록 코드를 작성해 놨는데, 아무리 다시 해봐도 작동이 안하는거다... 함수나 함...
element의 style 태그 내에 있는 속성들의 값을 읽기위해 사용하는 method입니다. element.style."attribute"의 경우, 특정 값을 할당할 때는 사용할 수 있지만 현재 element.style."attribute"내에 들어있는 값을 읽어오는 것은 불가능하기 때문입니다. * 1. 문법 let style = window.g...
사용자와 웹페이지 간의 상호작용하는 모습을 예제를 통해 HTML/CSS/JavaScript가 어떻게 쓰이는지 포스팅하겠습니다. * 1. Log-in 버튼 활성화 1-1. 소스 코드 HTML 기본 클래스였던 unactivatedLoginColor가 삭제되고 activatedLoginColor가 추가된 것을 확인할 수 있습니다. * 실제...
HTML/CSS에서 div 3개를 나란히 정렬하는 방법에 대해 포스팅하겠습니다. ** 결과 스크린샷, 2019-10-04 17-55-47.png 가운데 요소에 margin값을 줘서 1번 방법과 같은 결과가 나오도록 했습니다. flex는 부모요소의 display를 flex로 설정하고 자식요소의 flex값을 설정하는 방법입니다....
검사항목 (적절한 대체 텍스트 제공) 텍스트가 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다. IR기법 .blind{position:absolute;line-height:0;overflow:hidden;} .blind{position:absolute;top:-1000em;line-height:0;overflow:hid...