CSS 작성 방법론🔹 BEM (Block, Element, Modifier)이름뜻예시Block독립적인 하나의 컴포넌트menu, button, cardElementBlock의 하위 구성 요소menu__item, button__iconModifierBlock이나 Element의 변형/상태menu__item--active, button--large 제목 설명 텍스트 버튼.card { padding: 20px; border: 1px solid #ccc;}.card__title { font-size: 24px;}.card__description { color: #666;}.card__button { background: white; border: 1px solid #000;}.card__butt..

부트스트랩(BS5)부트스트랩을 적용하는 방법 중 cdn을 통해 적용하면 개발자 도구에서 해당 내용을 확인할 수 있다.개발자 도구 ➡️ Network 탭 ➡️ bootstrap.min.css 또는 bootstrap.min.js 클릭 ➡️ headers 탭 Request URL 확인 가능개발자 도구 ➡️ Sources 탭 ➡️ Page의 cdn/jsdelivr.net 클릭 ➡️ dist 폴더 클릭 ➡️ css 또는 js 폴더 클릭다운받은 css 또는 js 파일의 내용 확인 가능 컨테이너컨텐츠를 감싸기 위해서는 컨테이너가 필요Fixed 컨테이너container 클래스 사용좌/우 여백을 가짐 Fluid 컨테이너container-fluid 클래스 사용뷰포트 전체 너비를 차지 그리드 시스템flexbox를 기반으로 ..

어제에 이어 오늘도 CSS에 대해 배웠다. 대부분 아는 내용이라 배운 것 중에 자주 쓰이고 중요해보는 것 위주로 다시 작성해보았다. 마지막에는 부트스트랩에 대해서도 조금 수업했는데, 부트스트랩은 거의 사용해본 적이 없어서 초면이라고 해도 무방하다 😏근데 사용하는 방식이 Tailwind CSS랑 살짝 비슷해보여서 어렵지 않을 것 같다. CSSCSS 박스 모델모든 HTML 요소를 감싸는 상자전체 요소 너비 = 컨텐츠 영역 너비 + 왼쪽 패딩 + 오른쪽 패딩 + 왼쪽 테두리 + 오른쪽 테두리전체 요소 높이 = 컨텐츠 영역 높이 + 위쪽 패딩 + 아래쪽 패딩 + 위쪽 테두리 + 아래쪽 테두리 CSS 윤곽선테두리와 달리 요소의 테두리 밖에 그려지고 다른 컨텐츠와 겹칠 수 있음📍 윤곽선 Offset 속성윤곽선과..

남은 HTML 수업을 진행하고 이후에 CSS에 대해 들어갔다. 복습하는 개념으로 보니깐 도움이 되는 것 같다 !이번 기회를 통해 HTML, CSS를 마스터해 봐야겠다 ✌🏻 HTMLHTML에 파비콘 추가하기 요소 사용 HTML 페이지 제목 요소 사용 HTML 테이블tr테이블 행th테이블 헤더td테이블 셀 head1 head2 head3 content1 content2 content3 content4 content5 content6 ➡️ 결과📍 colspan/rowspan 속성colsapn: 확장할 열의 수rowspan: 확장할 행의 수 head1 head2 content1 content2 conte..

HTML 수업을 들어가기 전에 강사님께서 웹 구조와 역사에 대해서 먼저 강의해주셨다. 자세히 몰랐던 내용들을 배우니 신기하고 재미있었다.눈으로만 보고 머리로 익혀서 HTML 내용만 일단 블로깅하였다 ㅠㅠ 뭐라도 써놨으면 좋았을텐데 .. ~ 아쉽다. HTML이란Hyper Text Markup Language의 약자로, 웹 페이지를 만드는 표준 마크업 언어간단 예시 // HTML5 문서임을 정의 // HTML 페이지의 루트 요소, 전체 HTML 문서 정의 // 문서의 본문 정의, 표시되는 모든 콘텐츠의 컨테이너Heading // 큰 제목 정의Paragraph // 문단 정의 HTML 요소시작 태그, 콘텐츠, 종료 태그로 정의되며, 시작 태그부터 종료 태그까지의 모든 것을 의미내용시작 태그콘텐츠종료 태그Hea..