728x90 반응형 HTML & CSS 시리즈6 ID ? 사용법 뭐야~ | HTML & CSS 시리즈 012 아이디 는 클래스와 매우 유사하면서 차이점이 있다. 그 차이점을 확실히 짚어두어야만 나중에 헷갈리지 않고 자유자재로 사용할 수 있다. 아래 사진을 통해 클래스와 아이디를 비교해보자. 아이디도 결국 클래스처럼 style 태그 안에 스타일속성과 속성값을 만들어준 후 그 스타일을 적용해주고 싶은 태그로 가서 id 이름을 입력해주는 방식이다. 하지만, 사진에도 나와 있듯이 클래스는 한 클래스로 여러 태그들을 적용하여 스타일 해줄 수 있지만, ID는 그렇지 않다. 중복이 불가능하다. 즉, 이미 사용했던 ID 라면 다른 태그에 적용이 불가능하다. 클래스는 여러 클래스가 가능하다. big , blue 2가지가 가능한 반면에 id는 best , first 2가지 가 불가능하다. 하나만 가능하다. 결국 중복하면서 여러 .. 2021. 7. 23. 클래스(CLASS) 를 알고 싶다면? | HTML & CSS 시리즈 011 클래스는 코딩할떄마다 무조건 등장하는 것 같다. 클래스 사용법이 뭔데??? 이전 시리즈010 에서 사용했던 코드를 들고왔다. 1. 위 사진과 같이 스타일 태그를 쓴다. 2. 클래스 이름을 적는다. ex) .big-blue-text (이때 . 을 잊지말자!) 3. { 괄호 안에 스타일 속성,값을 입력해주고 } 로 닫아준다. 4. 클래스로 스타일 해주고 싶은 곳을 가서 태그 부분에 class="클래스이름" 을 적어준다. *해당코드에서는 h1 태그를 클래스를 이용해 스타일 적용시켰는데 아래 사진과 같이 알맞게 파란색깔 텍스트, 64픽셀, 텍스트 위치 중앙 으로 잘 출력 된 것을 확인 할 수 있다. 텍스트는 알겠는데 이미지에 클래스 적용은 어떻게 하는건데? 위에 작성된 코드 처럼 이미지 삽입후 class= "클.. 2021. 7. 23. 링크 !! very important! | HTML & CSS 시리즈 008 링크! 정말 웹페이지 만들때 중요하다! 링크 어떻게 생성해주는데?? 위 사진처럼 아래와 같이 입력 해줄수 있다. go there ~ 주소입력 란에는 클릭시 들어가고 싶은 링크를 걸어두면 된다. 뭐 예를 들어 구글로 가고 싶다! 그렇다면 google 이와 같이 작성할 수 있다. 그런데 이렇게 작성하게 된다면 새창이 아닌 사용중인 창에서 구글로 바뀌게 되는데 이걸 불편해 하는 사용자들이 꽤 있다. (쓴이도 불편함) 그렇다면 새로운 링크클릭시 새로운 창으로 연결하는 방법이 뭔데? google target="_blank" 이걸 연결하고 싶은 주소 뒤에 추가 해주면된다. 응용해보자! 다른 페이지로 넘어갔다가 돌아왔다가 하는 방법!!! 뭐야뭐야 그러면 응용해서 이처럼 메인페이지에서 다른 페이지로 넘어갔다가 다시 돌.. 2021. 7. 22. CSS 무엇인가? | HTML & CSS 시리즈 005 HTML 은 알겠는데 CSS 는 뭐야? 이처럼 html 은 내용을 css 는 스타일을 담당한다고 보면 된다. 마치 폰트 크기(Font-size), 텍스트 정렬(text-align), 텍스트 색(color), 여백(margin) 이런 모든 꾸며주는것들을 당당하는게 CSS 이다. 위에 사진을 보면 밑으로 부터 CSS 라고 보면된다. 말 그대로 스타일 담당 하는 코드들인데 작성법은 1. 스타일 해주고 싶은 태그를 먼저 적어준다. ex) h 또는 p 또는 p 안의 em을 스타일 해주기위해서는 p em { 블라블라; } 2. 위에서는 h (헤더)를 꾸며주기위해 h 를 먼저 적고 { }를 적는다. 3. 그리고 { } 안에 다가 스타일 코드를 적으면 되는데 위 코드를 보면, 텍스트 사이즈 , 텍스트 위치 에 대해 설.. 2021. 7. 22. 이전 1 2 다음 728x90 반응형
