프론트엔드 개발자가 될거야./htmlcss
-
레이아웃의 모든 것프론트엔드 개발자가 될거야./htmlcss 2022. 6. 21. 16:16
1. position 속성 - relative, absolute, fixed 2. inline, inline-block, block 1. position 속성 - relative, absolute, fixed position 에서 사용하는 값은 4개가 있는데 static 은 거의 사용하지 않아서 relative, absolute, fixed를 정리해보았다. relative relative는 position: relative; 자체로는 특별한 의미가 없다. top, right, bottom, left 프로퍼티가 있어야 힘을 발휘한다. 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있는 것이다. top, right, bottom, left 는 p..
-
Semantic Web과 Semantic Tag프론트엔드 개발자가 될거야./htmlcss 2022. 6. 20. 22:18
Semantic Web이란? : 의미를 가지는 웹 일반 웹은 컴퓨터가 정보를 알지 못하지만 semantic web은 컴퓨터가 정보를 알 수 있다. 웹에 존재하는 수많은 웹페이지들의 잡다한 데이터 집합에 의미와 관련성을 지니는 메타데이터를 부여하여 거대한 데이터베이스를 구축한 것이다. 메타데이터 : 다른 데이터를 기술하기위해 사용되는 언어 : 특정 데이터를 검색엔진으로 쉽게 찾아낼 수 있으며 데이터를 사용하는 사람의 눈에 보이지 않고, 컴퓨터가 이용함 왜 생겨났을까? 인터넷이 활성화되면서 웹의 사용이 폭발적으로 늘어났다. 이토록 복잡하고 고도의 동적인 웹 공간에서 지식을 믿을 만하게 검색, 관리하고 웹 장치들과 인간이 교류하기 위해서는 정보의 의미 처리가 필수적이게 되었다. 따라서 의미 정보를 자동적으로 ..
-
[위코드 35기 precourse-html-css] 위코드 첫 날, htmlcss 총정리, 배운 내용 복습프론트엔드 개발자가 될거야./htmlcss 2022. 6. 20. 21:45
들여쓰기, 띄어쓰기 (스페이스바 기능) 방법1   방법2 => text-indent 을 이용 .js-description { text-indent: 50px; } 밑줄긋기 p { text-decoration: underline; } 이처럼 text-decoration를 이용한다고 알고있지만 밑줄의 두께나 색깔 등, 완벽하게 커스터마이징 하기가 어렵다. 그래서 내가 원하는 스타일로 밑줄을 칠 수 있게 border-bottom으로 구현하는 것을 더 선호해야한다. CSS selector 표현 p.p-tag => p태그 이면서 p-tag클래스 .pre span => pre클래스 내부에 있는 span태그 .a div .b .pre span => a클래스 내부에, div태그 내부에, pre클래스 내부에 있는..
-
HTML input checkbox프론트엔드 개발자가 될거야./htmlcss 2022. 6. 15. 17:17
// 복수 선택 가능한 체크박스 // 단일 선택 체크박스 이름 삽입 시 태그를 사용하면 글씨 영역을 클릭해도 checkbox 영역이 클릭 된다. 방법 1 오늘 할 일 방법 2 오늘 할 일 체크 박스 그룹 지정 여러 체크 박스를 하나의 그룹으로 지정하고 싶을 때, name 속성을 같은 값으로 지정하기 공부하기 잠자기 카페가기 체크박스 checked/unchecked 기본 설정은 unchecked이고 특정 체크박스에 체크 표시를 하고 싶으면 checked 속성명 삽입하기
-
[위코드 35기]HTML, CSS로 자기소개 페이지 만들기프론트엔드 개발자가 될거야./htmlcss 2022. 6. 13. 16:17
위코드 사전스터디 첫번째 과제는 HTML,CSS로 자기소개 페이지 만들기! 되게 간단해보이지만 메뉴를 어떻게 구성하고 어떠한 내용을 넣고 어떻게 레이아웃을 할지 많은 고민 끝에 탄생했다. 회사를 다니면서 작업한 거라 시간은 많이 부족했다. 웹 페이지를 만들 때 신경쓴 부분은 정 가운데 정렬 메뉴에 hover하면 커지는 효과 메뉴 누르면 해당 부분으로 이동 마음에 드는 한글 폰트 찾기, 글자 밑줄 긋기 짤짤이 이정도.. 1. 정 가운데 배치 display: flex; flex-direction: column; (or row) justify-content: center; // 수직 가운데 정렬 align-items: center; // 수평 가운데 정렬 text-align: center; // 텍스트 가운데..