올리비아 코딩스쿨

이번에는 id 선택자에 대해 알아보자. 1. id 선택자란? - HTML 요소에 개별적으로 CSS를 적용하기 위해 쓴다. 예를 들어 3개의 이미지 중에 하나의 이미지에는 특정한 색깔의 배경을 입히고 싶을 때, id 선택자를 사용할 수 있다. - 내가 적용하고자 하는 HTML 태그에 id 속성을 넣는다. ex) id = "apple" - 그리고 link 태그로 연결되는 css 파일 안에 ex) href="css/styles.css" - id 선택자를 선언하고, 적용할 CSS 속성과 값을 적는 것이다. ex) #id { background-color: blue;} 2. id 선택자 vs class 선택자 한편, 앞에서 배웠던 class 선택자도 id 선택자와 비슷한 역할을 한다. 그렇다면 굳이 id 선택자와..

웹페이지에서 두 사진의 배경색깔은 파랑색이다. 만약 내가 하나의 이미지를 코드에 첨부한다고 해도, 배경색깔은 파랑색으로 자동 적용된다. 외부 CSS(link코드)를 이용하여 전체 웹페이지에 CSS코드가 적용되도록 링크를 만들었기 때문이다. practice.html styles.css img { background-color: blue; } 하지만, 매 사진마다 다른 배경색깔을 적용하고 싶을 수 있다. 즉 각각의 HTML 요소마다 다른 CSS를 적용하는 것이다. 이럴 땐 어떻게 하면 될까? 바로 클래스 선택자 class selector를 이용하면 된다. 먼저 html파일의 이미지 태그에서 클래스 class속성을 추가해서, 각각의 요소를 분류한다. 한편, 이제까지 외부 CSS를 만들고 선택자 Selector..

세상 온갖 이모지는 여기서 찾을 수 있다. 주소------> 클릭 여기에 있는 이모지는 이미지파일 또는 이모티콘으로 사용이 가능하다. 주제별로 카테고리가 나뉘어있다. 찾고 싶은 명확한 것이 있다면 검색 창에 사과를 입력하고, 여러 사과 중 Red Apple을 클릭한다. Apple, Samsung, Google 등에서 쓰이는 Red Apple의 다양한 예가 있다. 이것들을 이미지파일로 쓰고 싶다면, 그 중 하나를 골라 오른쪽 마우스 클릭, 이미지 주소 복사를 누른다. 코드창으로 돌아와, 사과이미지를 첨부한다. 또는 이모티콘 그대로 쓰고 싶다면, copy 버튼을 눌러 복사한 후, 코드창에 ctrl +V로 붙여넣기를 하면 그대로 이모티콘으로 사용하도록 할 수도 있다.

CSS Syntax The grammar of the CSS language 누구나 한번쯤, 콘솔창에서 Syntax Error를 본 적이 있을거다. Error 코드 중에 가장 빈번하게 나오는 것이 Syntax 에러인데, 문법적인 오류가 있다는 뜻이다. Syntax는 '구문'이라는 뜻으로 '문법'과 비슷한 의미이다. 오늘은 CSS의 Syntax(문법)을 알아보고, CSS를 올바른 Syntax로 작성하여 내 웹페이지의 스타일에 영향을 주기위해 CSS 코드 안의 어떤 요소를 변경해야 하는지 생각해보자. selector { property : value ; } 1) 선택자 selector { 속성 : 값 ; } 선택자 selector: 시작부분에 나오는 것으로, 그 뒤에는 중괄호 쌍이 나온다. 어떤 대상 who..

디버깅 하는 방법 먼저 크롬 개발자 도구를 연다. 1. 크롬 브라우저 열기 2. 크롬 맞춤 설정 및 제어> 도구 더보기> 개발자 도구 크롬 개발자 도구 콘솔창 활용하기 3. 콘솔> 에러확인 에러를 보고 고칠 수 있다면 고친다. 크롬 개발자 > 요소> 스타일 우선순위 확인하기 작성 위치에 따라 코드의 중요도, 우선순위가 달라진다. 1순위: 인라인 2순위: 내부 CSS 3순위: 외부 CSS 대강의 느낌은 외부 CSS를 이용해 전체적으로 CSS코드를 적용하되, 해당 웹페이지에만 적용되는 내부 CSS가 있다면 덮어쓰기하여 적용하고, 특정 요소에만 적용되는 인라인 CSS를 이용해 보다 구체적인 규칙을 적용할 수 있다.