🎭 HTML CSS

[HTML] Semantic

Semantic HTML Semantic : '의미를 담고 있는'을 의미 div, span과 같은 태그는 non-semantic한 태그이다. div 대신 header를 사용한다면 대략적으로 이 웹 상의 도입부라는 것을 알 수 있게 된다. Semantic의 장점 접근성 : screen reader 혹은 browser가 코드를 더 잘 해석할 수 있는 덕분에 더 좋은 접근성을 가질 수 있다. SEO(Search Engine Optimization ; 검색 엔진 최적화) : 웹 페이지의 구조에 의미를 부여하기 때문에 좀더 검색 엔진을 활용하기에 유리하다. 개발자들이 코드를 볼 때 가독성이 좋아진다. hello world, i'm jayden! hello world, i'm jayden!

[HTML] Forms

HTML Forms form 태그 Password : 간단한 개념이지만 나중에 헷갈리지말기! 특히, 아직은 잘모르겠지만 프론트 단에서 데이터를 input을 통해 받고 그에 대해 name과 value의 쌍으로 전달되는 부분 더 기억!

[CSS] Position과 Display

Position 1. static(default) - 가장 기본 위치 - top, bottom, left, right 등을 사용할 수 없다. - 기본 문서 흐름에서 벗어나지 않는다.2. relative - 기본 위치에 대해서 상대적인 위치(즉, 기본 위치에 대한 '공간'은 차지하고 있음) - static에 해당하는 위치에서 각 방향에 대해 얼만큼 이동할지 설정 - 기본 문서 흐름에서 벗어나지 않는다.3. absolute - 말 그대로 절대적인 위치로, 페이지 레이아웃에 공간을 배정하지도 않는다. - 가장 가까운 위치 지정 부모 요소에 대해 상대적인 위치로 설정 - 단, 부모 요소 중 위치 지정 요소가 없다면(static만 있다면) 초기 컨테이닝 블록을 기준으로 배치 - 기본 문서 흐름에서 ..

[CSS] Styles : Inline VS Internal VS External

CSS 스타일링 방법 Inline html 내의 element에 바로 스타일 정의하는 방식 html 작업을 하며, 그 때 그 때 element마다 적용하기에 직관적이긴 하지만 너무 지저분해진다. I'm learning to code! Internal html의 head에서 각 element에 대한 style을 정의하는 방식 Inlined에 비해 비교적 깔끔하지만, 여전히 html 내에 있어 다소 지저분하다. External 같은 위치(동일한 폴더 내에) css파일(보통 style.css)을 만들어 html 파일과 연결시키는 방식 html의 head에 link를 사용한다. href는 css파일의 주소(url도 가능하다), rel는 relation의 약자로 html파일과 link된 파일간의 관계를 설명한다...

[CSS] box-sizing : content-box VS border-box

box-sizing 박스의 사이즈에 대한 기준을 잡는 개념! default로 content-box가 되어있다. content-box content를 기준으로 하는 box-sizing 방법 width와 height가 content를 기준으로 하게 된다. content에 대한 너비와 높이를 정하게 되므로 실제 렌더링되는 박스의 크기를 계산하는 게 복잡함(padding, border 두께까지 고려) h1 { border: 1px solid black; height: 200px; width: 300px; padding: 10px; } border-box border를 기준으로 하는 box-sizing 방법 width와 height가 content, padding, border를 합친 것을 기준으로 하게 된다. ..