프로젝트를 하던 중 input 태그에 위와 같은 스타일을 적용하고 focus 되었을 때 border의 색을 바꿔주고 싶어 focus 가상 클래스에 아래와 같이 border를 바꾸어 주었다. 그런데 이렇게 적용이 안되고 까만색으로 표시된다. 문제를 찾기 위해 개발자도구를 켰지만.. 개발자 도구 상으로는 잘 적용됐다고 나온다..!!ㅋㅋㅋ 저번에는 배경 색을 변화시킬 때 background-color 대신 background를 사용했더니 잘 적용된 기억이 있어서 혹시 border 대신 사용되는 속성이 있는지 찾아보았다. 구글링 해보니 outline이라는 속성을 찾을 수 있었다. 따라서 border 대신 outline을 사용해서 구현해 보았다. 구현은 잘 되는데 과연 border과 outline을 바꿔서 사용해..

코드 리뷰를 받다가 html login form에는 form 태그를 사용해야한다는 리뷰를 받았다. 평소에 로그인 폼을 백엔드와 통신하도록 제대로 구현해 본 적이 없어 간과하고 있었다 ㅠㅠ form 태그를 언제 써야하는지 조사해보자. 전통적인 서버사이드 웹에서는 GET 이외의 메소드 요청을 보내기 위한 필수적인 태그였다고 한다. 실제 mdn을 참고해봐도 form태그는 폼 생성시 필수적으로 사용해야한다고 설명하고 있다. 따라서 HTML을 이용해 페이지를 구성했다면 폼(제출) 요소에는 꼭 form 태그를 사용하는 것이 좋을 것 같다. form 태그에 지정할 수 있는 많은 속성들이 있지만 기본적으로 action, method 는 지정해 주는 것이 좋다. action = "폼 데이터를 처리할 백엔드의 url" 즉..

position 은 부모 요소 내의 자식 요소에 부여해 자식 요소의 위치를 결정하는 방법이다. position으로 줄 수 있는 속성은 다음의 5가지가 있다. static html에서 기본적으로 나에게 부여하는 위치. 블록 요소라면 위에서 아래로, inline 요소라면 한국어 쓰는 순서대로 배치된다. relative 원래 나의 static 위치를 기준으로 움직인다. 원래 내가 있던 공간은 그대로 비워져 있다. (특별히 다른 요소를 조작하지 않는 한 다른 요소는 침범하지 않는다.) 따로 left, right, top, bottom 값 중 하나도 주지 않으면 static 자리에 그대로 존재한다. relative를 부여하면 요소가 붕 뜨게 된다. 포토샵을 해 보았다면 포토샵에서 레이어 하나를 위에 더 생성해 거..

시맨틱 태그 프로그래밍에서 semantic이란, 코드 조각이라는 뜻입니다. HTML에서는 이 엘리먼트가 가진 목적이나 역할은 무엇인가? 의 관점으로 코드를 바라볼 때 이 단어를 사용합니다. 시맨틱 태그는 div 태그와 기능상으로 똑같은 역할을 하지만 의미상으로 추가적인 의미를 가지고 있는 태그를 말합니다. 시맨틱 태그의 종류 100여 개가 있으나 그중 자주 사용하는 몇 가지는 다음과 같습니다. 태그 이름 설명 예시 header 콘텐츠 소개 및 탐색에 도움이 되는 정보를 넣는 헤더에 사용 제목, 로고, 검색 폼 등이 포함된 사이트 상단 영역 등.. nav 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 요소에 사용 메뉴, 목차, 인덱스 등.. main 문서 body의 주요 콘텐츠를 의미 블로그의 메..

css에서 스타일을 작성했는데 적용이 안 되는 경험, 다들 한 번씩 있으시죠? css의 스타일 적용 우선순위를 고려하지 않을 경우 이런 문제가 발생할 수 있습니다. 오늘은 css cascading에 대해 알아보겠습니다. cascade란 cascade는 작은 폭포를 뜻합니다. 즉 여러 단계가 존재하는 대상이나 현상을 말할 때 사용됩니다. CSS에서는 규칙이 우선순위 순서대로 적용됩니다. 이를 cascade, cascading이라고 합니다. cascading은 세 가지 주요 기준에 의해 결정됩니다. 1. 중요도 (importance) 2. 특정도 (specificity) 3. 소스 순서 (source order) 중요도 해당 스타일이 얼마나 중요한지를 나타내는 요소로 다음의 순서를 따릅니다. 번호가 작을수록..

html은 태그의 문법에 를 쓰다 보니 텍스트 내부에 등의 내용을 넣고 싶을 때는 주의애향 합니다. 안녕하세요! 태그는 제목을 쓸 때 사용합니다. 태그로 닫아줍니다. 이렇게 작성하면 을 태그로 인식하기 때문에 원치 않게 과 사이 글자가 크게 작성될겁니다. 따라서목적대로 작성하고 싶다면 를 사용해야 합니다. 안녕하세요! 태그는 제목을 쓸 때 사용합니다. 태그로 닫아줍니다. 이렇게 작성하면 원하는대로 text를 띄울 수 있습니다.