Timeline

배경화면 위에 글씨가 있는 상황에서 배경화면은 투명하게 하고 글씨는 그 위로 보이도록 하겠습니다 html은 아래와 같습니다 index.html Hello 이제 css 설정을 해보겠습니다 -position을 이용해 배경화면과 글씨의 위치를 조정해줍니다 -가상선택자 ::after을 이용해 배경화면의 가상요소를 생성하여 여기에 배경 이미지와 투명도를 지정해줍니다 -z-index 설정으로 가상요소를 원본의 뒤로 밀어줍니다 style.css .container { width: 100%; height: 100%; text-align: center; position: relative; z-index: 1; } .container::after { width: 100%; height: 100%; content: ""; ..

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! 1. input -type 속성 button checkbox date email password radio search submit text ... https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input : 입력 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입 developer.mozilla.org -안에서 사용 -스스로 닫는 태그 라서 하위 태그를 추가할 수 없어 디자인 폭이 좁음 이..

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! 1. tag definition list의 약자로 사전처럼 용어를 설명하는 목록을 만듦 2. tag definition term의 약자로 정의되는 용어의 제목을 넣을 때 사용 3. tag definition description의 약자로 용어를 설명하는데 사용 4. 사용예시 -코드 작성 Firefox A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers. -실제 모습 Resources https://aboooks.tistory.com/211 https://developer.mozill..

1. inline 주로 텍스트를 입력할 때 사용하는 형태로 content 만큼 영역만큼 차지합니다 width와 height 값을 설정할 수 없다 요소 : , , , , , , , , , , , ... 2. inline-block inline과 block의 특징을 모두 가진 요소이다 inline과 달리 element에 width와 height 값을 설정할 수 있고, 설정하지 않은 경우 content 만큼 영역을 차지합니다 3. block 한 영역을 차지하는 박스 형태이다 width, height, padding, margin 값을 설정할 수 있다 요소 : , , , , , , , , , , , , , ... Resources https://www.w3schools.com/css/css_inline-bloc..

0. static css position의 default 값은 static이다 static의 속성은 element를 위에서부터 아래로 배열시켜준다 아래의 속성들과 달리 top, bottom, right, left 속성의 값을 무시한다 1. relative top, bottom, right, left을 이용해 원래의 위치(static)에서 상대적인 position을 갖게 해준다 원래의 위치(static)에 빈 공간을 만들어 다른 content가 위치할 수 없게 한다 2. absolute 가장 가까운 조상 positioned를 기준으로 상대적인 위치를 설정하고, 가장 가까운 조상 positioned가 없다면 body를 기준으로 위치가 설정된다 3. fixed 화면에서 상대적 위치를 결정한다 스크롤에 관계없이..

Semantic Web이란? -기계가 읽고 처리할 수 있는 형태로 제작된 웹이다. 웹에 존재하는 수많은 웹들에 메타데이터를 부여하여 잡다한 데이터 집합이 아닌 의미와 관련성을 가지는 거대한 데이터 베이스를 구축하고자하는 발상이다. Semantic Tag란? -활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 Tag로 효과적인 검색이 가능하게 한다. Tag만 보고도 무엇을 의미하는지 알아볼 수 있는 Tag이다. -Semantic Tag : , , , , , -Non-semantic Tag : ... "HTML img Tag"과 "CSS backgraound-image Property"의 차이는 무엇일까? 1. alt 속성 tag는 alt 속성에 문자열을 넣을 수 있어 검색엔진이 빠르게 인식할 수 있..