HTML/CSS

HTML(HyperText Markup Language)은 웹 페이지를 만드는데 사용하는 언어로 웹 페이지의 뼈대를 만드는 역할이다. HTML:하이퍼텍스트 마크업 랭귀지의 줄임말인데 하이퍼텍스트란 사용자가 기존 문서에서 다른 문서로 이동할 수 있게 해주는 텍스트를 의미

경로는 파일이나 이미지 가져오는 경로로 상대경로와 절대경로가 있다.a태그는 href 속성을 이용해서, img태그는 src 속성을 이용해서 명시한다.같은 단계(폴더)에 있는 경우 ./를 작성하여 불러온다../를 생략해도 같은 단계에 있다면 동작한다.내가 작성중인 파일 기

코드펜은 HTML, CSS, JS 코드 조각을 테스트하고 시연하기 위한 온라인 코드 편집기VS Code에서 하나하나 설정하는게 귀찮고 빨리 테스트해보고 싶은게 있다면 이용하기 좋은 듯!https://codepen.io/

브라우저 스타일 초기화는 기존 웹 브라우저가 각각 세팅되어있는 기본 스타일들이 다 다르니까 초기화하고 시작하는걸 권장한다.https://www.jsdelivr.com/package/npm/reset-css'copy HTML'을 클릭하여 HTML head 부분에

HTML에서 태그는 시작 태그와 종료 태그가 쌍을 이루며 그 안에 내용이 들어간다.빈 태그(Empty tag)는 종료 태그 없이 시작 태그만 존재하는 것으로 종료 태그를 입력하면 유효하지 않은 HTML 문법이다.빈 태그에서 / 슬래시는 안 붙여도 되긴하지만 빈 태그인지

HTML 요소는 인라인 요소와 블록 요소가 있다. 인라인 요소는 흐름을 끊지않고 태그에 할당된 공간만 차지한다면 블록 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만든다. 자세한 차이점은 다음과 같다. 인라인(inline) 요소 - 글자를 만들기 위한 요소들

앞선 글에서 인라인 요소와 블록 요소가 무엇인지 특징과 성질에 대해 공부했는데 이와 관련되어 실제 코딩에서 자주 쓰이는 요소들(elements)을 정리했다. 블록(Block) 요소 : 특별한 의미가 없는 영역 구분을 위한 요소 (division) : 제목을 의미

CSS는 웹 페이지의 스타일과 내용적인 부분을 서로 분리해 놓은 스타일 시트이다. 웹 사이트 스타일을 일관성 있게 유지할 수 있게 해주며 유지 보수도 쉬워진다.선택자 {속성 : 값}: 스타일(CSS)을 적용할 대상 선택자(Selector)속성은 스타일의 종류(Prope

CSS 선택자(Selector)란 html에 스타일을 넣어줄 때 기준이 되는 것. HMTL 구조를 시각적인 디자인과 레이아웃으로 표현하는데 CSS인데 이를 통해 특정 요소들을 선택해 스타일을 적용해줄 수 있다.모든 요소들에 동일한 효과를 줄 때 사용하는 선택자html

마우스 커서가 올라가 있는 동안 CSS 내용 적용마우스를 클릭하고 있는 동안에만 적용focus되면 선택 --> HTML 대화형 콘텐츠만 가능 ex) input, a, button, label, select 등focus가 안되는 요소인데 포커스를 하고 싶을 때는 tabi

CSS 속성에는 박스모델, 글꼴/문자, 배경, 배치, 플렉스(정렬), 전환, 변환, 띄움, 애니메이션, 그리드, 다단, 필터 등이 있다. 속성 정리 (1) ~ (n)으로 정리 예정내용(content): 텍스트나 이미지가 들어있는 박스패딩(padding): 요소의 내부

font-style: italic 이탤릭체font-weight: 기본값은 normal or 400, 두껍게 bold or 700 (100~900, 100단위로 9개 지정 가능)font-size 기본 크기 16, 단위로 지정 가능(px, em, rem 등)line-hei

배치와 플렉스 자주쓰이는 속성 정리

css의 transition과 transform