HTML/CSS

HTML은 무엇인가? -HTML은 콘텐츠의 구조를 정의하는 마크업 언어 -태그로 감싸서 단어나 이미지를 어딘가로 하이퍼링크하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만든다. -독립적인 구문을 만들고 싶다면 태그로 감싸서 하나의 문단임을 명시할 수 있

HTML의 태그는 그 이름만 봐도 의미를 알 수 있음(그래서 시맨틱semantic태그)ex) p(paragraph) 태그나 a(anchor) 태그대부분의 웹사이트들은 디자인은 달라도 구조는 비슷함(header, main, footer)태그의 이름만 봐도 이 단락이 어떤

웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시됨별다른 스타일 지정없이 제목으로 사용할 수 있는 태그닫는 태그 필수< hn >태그에서 h는 제목을 뜻하는 heading의 줄임말이고 n은 1~6자리 숫자가 들어가고, 제목 텍스트를 크기별로 표시할 수 있음(숫자

1.static positon을 설정하지 않았을때 기본값. 요소를 일반적인 문서 흐름에 따라 배치. 2.relative 요소를 일반적 문서 흐름에 따라 배치. 자기 자신을 기준으로 오프셋 적용. 오프셋은 다른 요소에는 영향을 주지 않음. (따로 toa, bottom,

위치지정요소와 자손이나 하위플렉스 아이템의 z축 순서를 지정함.(단 position:static 이 아닌 fixed, absolute, relative, sticky에서만)숫자가 클수록 맨 윗쪽에 쌓임(auto도 값으로 줄 수 있지만 z-index 안쓸때와 같은 결과가

input 태그 등에 포커스를 받은 요소를 나타냄보통 사용자가 요소를 클릭하거나 tap키로 선택했을 때 발동!codepenkike01/embed/JjevWvN?default-tab=html%2Cresult요소가 focus 되는 동안 적용휴리스틱을 통해 요소에 대한 포커

tr-줄(행)th-제목줄(대표하는 열)td-내용부분!codepenkike01/embed/wvRZVxK?default-tab=html%2Cresultscope- 해당 헤더 셀이 무엇을 대표하는 셀인지를 명시(접근성이 좋아진다)!codepenkike01/embed/RwEO

○임베디드 요소 HTML 문서에 삽입하는 이미지, 비디오, 오디오, 웹사이트, 이미지 맵 등에 대한 컨텐츠 요소 1-1 picture picture 태그는 다양한 스크린환경(스마트폰, 아이패드, 데스크탑, tv등)에 맞는 이미지를 화면에 적절히 표시할 때 사용 im

A->B 로 전환되는 모습을 보여주는 것::::어떤 css를 변경할건지 ' , '로 여러개 사용 가능\-> all로 지정하면 모든 프로퍼티에 전부 transition적용어떤 속성만 지정하면 그 속성만 적용됨\-> 만약 :hover에 transition을 넣으면마우스를

: 유저의 액션이 없이도 계속 작동하게끔 적용 가능다수의 스타일을 전환하는 애니메이션을 만들 수있음animation-durationanimation-timing-functionanimation-delay\-> transition과 사용법 같음\-몇번을 반복할 건지 지정

@media -> @media [media-type] and (조건) all : 모든 미디어 secreen: 스크린에서 사용하겠다 1) @media all or screen and (max-widht : 800px) !codepen[kike01/embed/abXb

웹페이지가 다른 브라우저 및 기기에서 일관된 방식으로 표시되도록 하는 것애플에서 개발한 웹 브라우저로, 현재 전 세계 웹 브라우저 점유율 2위에 올랐을 정도로 크롬 다음으로 인기가 많다.애플 MAC OS나 IOS전용으로 출시되어 사실상 애플 전용 브라우저라고 보는게 맞

!codepenkike01/embed/rNPoEPE?default-tab=html%2Cresult타이핑 효과가 나타나게 할 텍스트를 투명하게 배경처럼 깔아두고 가상요소로 글자를 입힌다.border-right를 사용해 커서 효과를 줌white-space스페이스와 랩, 줄