css

웹 기본 정리 maybe TBC

HTML으로 구조설계하고 CSS로 스타일링 HTML 기초 CSS 기초 #Id와 .Class 선택자 Font Box model HTML 레이아웃 리셋하기 Layout with Flex Container flex 컨테이너 (Parent) 의 속성 flex 아이템 (Child)의 속성 와이어프레임 (Wireframe) HTML Tutorial W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3scho..

BOX MODEL

BOX MODEL 박스는 줄바꿈이 되는(word_wrap) 박스와 줄바꿈 없이 옆으로 이어지는 박스로 구분된다 Block box abcdefghi jklmnop..... 줄바꿈 o , , , , 등... Inline box abcdefghijklmnop.... 줄바꿈 X 크기지정 X , , ,,,..등 display: inline-block inline box 처럼 옆에 붙으며 고유의 크기를 갖는다. 박스의 종류별 특징 줄바꿈 여부 기본 너비 width, height 사용 여부 Block Box O 100% O Inline-block X 글자가 차지하는 만큼 O Inline X 글자가 차지하는 만큼 X 박스의 구성 요소 항상 여백을 고려한 디자인을 해야한다. BORDER(테두리) //body 태그에 1p..

CSS 기초

CSS 스타일 (스타일 시트 언어) 효율적인 UI (User Interface)를 통하여 UX (User Experience) 를 사용자에게 제공하는게 주 목적 정보전달력 & 가독성 향상 / 색약기능, 다크모드 등 HTML 안에서의 CSS 적용 > HTML 태그에 직접 CSS 속성을 적용 할 수 있지만 헷갈릴 우려가 크고 구조와 내용을 담당하는 HTML과 디자인인 CSS를 분리하는 관심사 분리 측면에서 비권장 된다. (즉 HTML 파일에서 구조와 틀에 관련된 내용만 작업하고 디자인은 CSS파일에서 한뒤 연결 해서 쓴다.) (3번 코드) 다만, CSS 코드가 길지 않으면 HTML 요소에 직접 CSS 속성 추가가 가능하다. (1번, 2번 코드) 1. Inline CSS style ..... 2. Intern..