1. 후자 우선순위 2. 구체성(명시도) 우선순위 3. 중요성의 원칙 * 전체 선택자의 가중치는 0으로 가장 낮다. 자손 / 형제 / 직계 선택자 hello world hello hello world helloworld 구체성의 원칙 class가 아무리 동등한 점수를 가져간다고 해도 id의 우선순위를 이길 수 없다. 물론 type선택자가 아무리 많아져서 점수가 11점이 된다고 해도 class를 이길 수 는 없다. h1의 첫번째 h1의 두번째 h1의 세번째 h1의 네번째 hello 선택자 유의사항 공백이 있는 경우에는 class1의 자식요소에서 class2를 찾는 것이고 공백이 없는 경우에는 동일한 요소에서 있는 class이름을 선택하는 것이다. .class1 .class2 { } .class1.class..
전체 글
마진(margin)이란? 요소의 네 방향 바깥 여백 영역을 의미하며, 요소들간에 공백을 둬서 구별하게 해주는 역할을 한다. 마진은 요소가 차지하는 전체 너비와 높이에 포함되지 않는다. CSS를 작성하다가 margin을 주었는데 내가 원하지 않은 사이즈의 margin이 들어가는 경우를 종종 확인 할 수 있다 이러한 상황을 마진겹침현상때문에 발생하게 된다. margin 겹침현상 (Margin-Collapsing) 마진겹침현상이란 사실 css를 만든 사람들이 의도한 동작이며 block-level요소와 block-level요소가 나란히(인접) 배치되어 있는 경우 상하단 마진(margin-top / margin-bottom)이 겹치는 현상이다. 좌우 마진은 마진겹침현상이 발생하지 않는다. 이러한 마진겹침현상은 사..
HTML 페이지에 이미지를 삽입하기 위해서 사용하는 태그 img 태그의 속성 src속성 이미지파일을 브라우저에 나타나게 하기 위해서 필수적으로 필요한 태그 로컬에 위치한 파일의 경로 및 파일명을 입력 경로를 입력하는 방법 2가지 절대 경로란? 처음(root)부터 위치를 입력해가면서 접근하는 경로 상대 경로란? 현재 내가 있는 디렉토리를 기준으로 접근하는 경로 alt(alternative text) 이미지가 브라우저 화면에 보이지 않을 경우 속성값에 적힌 텍스트를 대신 보여준다. 스크린리더와 같이 접근성을 위한 프로그램에 정보를 제공하기 위한 용도로 사용한다. 브라우저에게 이미지에 대한 정보를 전달함으로써 Search Engine Optimization에 도움을 준다. srcset 여러 해상도에 대응하여 ..
Text-level 요소의 특징 요소안의 컨텐츠의 크기(자식 요소)만큼만 영역을 점유 → block-level요소와는 가로줄 한라인을 모두 차지 한다는 점과 다른 특성 자식으로 Sections, Grouping Contents를 사용 할 수 없다. ex) span > div → 이러한 방식의 마크업뿐만 아니라 손자에 사용하는 것도 모두 문법오류가 된다. Text-level 요소의 종류 , 태그 줄바꿈의 위한 태그 텍스트 박스에서 한줄로 모두 표시가 안될때에만 줄바꿈이 일어나게 해줄 때 사용하는 태그 브라우저의 화면이 줄어들면서 공간이 좁아져 한줄로 표현이 되지 않을 때 줄바꿈을 해주는 역할 와 관련된 CSS속성 work-break default속성값 → normal word-break : break-wo..
표준 CSS 박스모델에서 요소의 전체적인 크기는 컨텐츠 박스 + 보더 박스 + 패딩 박스의 너비와 높이 값을 모두 더해 정해진다. 하지만 박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 불편하다. 이러한 문제를 해결하기 위해 아래의 코드를 확인 해보자 hello world hello world
주요 내용 목차 간단한 용어 정리 block vs inline auto vs 100% content-box vs border-box 웹 사이트를 만들기 위해서 웹 사이트의 레이아웃을 확인(큰 덩어리가 보는 것이 필요하다.) 세부적인 사항(디테일 / 글자폰트, 두께, 사이즈 등..) 을 먼저 보지 않고 큰 레이아웃부터 확인 후 웹사이트를 제작하는 것이 좋다. 간단한 용어 정리 → 태그 Contents → 요소(Element) div { Style. → 선택자(Selector) } 같은 div를 사용하더라도 어디에서 어떤 용도로 사용하는지에 따라 부르는 용어가 다르다는 것을 간단히 알고가도록 하자 /* CSS파일 */ div { Type Selector(유형 선택자)라고 한다. background-color..
Font Awesome 사이트(https://fontawesome.com/search) -아이콘(svc)파일 가져오기 -구글 창에서 color picker검색하기 -svc파일을 열어 fill의 parameter로 Hex값을 넣어 색깔을 변경 -svc to png 사이트로 접속 후 png파일 다운로드 -아이콘 완성 Canva 사이트(https://www.canva.com/icons/) -Logo창 접속 후 템플릿을 이용하지 않고 Blank 접속 -다양한 아이콘들을 이용해 나만의 아이콘 제작 -다운로드 후 흰색배경 removebg로 접속 해 삭제 -재 다운로드한 이미지 크로핑 Color.adobe(https://color.adobe.com/ko/create/color-wheel) -컬러 조합 추천사이트
git push password 에러 remote: support for password authentication was removed on august 13, 2021. please use a personal access token instead. 기존에는 원래 Github에서 clone을 해오는 과정이나 push를 하는 과정에서 사용자의 아이디와 비밀번호로 권한을 인증하였지만 2021년도부터는 Token을 발행하여 권한인증을 하는 것으로 변경되었다. Mac버전 토큰 발행방법 1. GitHub 접속 후 로그인 2. GitHub 상단에 있는 개인 프로필을 클릭한 후, Settings를 클릭 3. 좌측 메뉴에서 Developer settings > Personal access token > Generat..
Git은 소스코드 및 파일의 변경내역을 저장하는 분산 버전관리 시스템 Window window에서는 리눅스 기반의 운영체제를 사용하지 않기 때문에 unbuntu를 다운받아서 사용을 하거나 리눅스환경에서 명령어를 치거나 Gitbash다운받아서 CLI환경에서 작업을 진행할 수 있다. Mac mac은 기본적으로 git이 깔려있지만 최신버전으로 업데이트를 하기위해서 homebrew를 통해서 다운로드를 하도록 하자 spotlight(Cmd + space) 켜서 터미널 입력 → 터미널 접속 git --version #버전확인 Git을 사용하기 위해 사용자 정보를 설정 및 설정을 제대로 했는지 확인하기 위해서 list 명령어를 사용 git config user.name "사용자 이름" git config user.e..
Git이란? 분산 버전관리 시스템 / 협업 시스템 버전관리란? 시간에 따라 이전에 진행된 과정을 확인 가능 수정이 이루하다가 문제가 발생하거나 원래 버전으로 돌아가고 싶을 경우 이전 버전으로 돌아갈 수 있게 해주는 장점이 존재 GitHub란? 외부 컴퓨터로 대신 백업을 해주는 웹 서비스 Git으로 관리하는 프로젝트(.git이라는 폴더가 존재)의 복사본을 저장해주는 서버를 제공 GitHub에서 외부의 프로젝트를 나의 로컬 레포지토리로 가져올 수 있다. GitHub의 장점 유지보수 저장 용량 언제 어떤 코드가 수정되었는지 확인(추적관리) 코드 공유(코드 저장, 만약 파일이 저장된 노트북을 잃어버린다면?) 버전 관리