본문 바로가기

728x90

HTML + CSS 시리즈🕸28

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.

유명 인물을 소개하는 간단한 사이트를 만들어보기 | HTML & CSS 시리즈 010 앞에서 배운 내용들을 가지고 응용해서? 유명인물을 소개하는 사이트를 만들어 보겠습니다. * 조건 title 태그에 인물 이름 h1 태그에 인물 이름 img 태그에 인물 사진 (인터넷에 올라와 있는 이미지) p 태그에 간단한 설명 (b 태그와 i 태그 하나씩 포함시켜주세요.) 이 인물과 연관 있는 사이트로의 링크 (a 태그) 한개 레이첼 맥아담스 어바웃 타임 여주인공인 '레이첼 맥아담스' 입니다. 영화- 어바웃 타임 사이트 2021. 7. 23.

이미지 넣기 | HTML & CSS 시리즈 009 웹 만들때는 이미지를 삽입은 정말 빼놓을 수 없는 부분인 것 같다. 잘못코드를 작성하여 위와 같은 사진을 보게 될때! 아래의 방법을 다시한번 체크해보자! 이미지 삽입 어떻게 하는건데~~~? 위 와 같은 코드 작성시 웹사이트내에 있는 사진의 주소를 복사해서 삽입이 가능하다! 물론 이렇게 감당 되지 않는 사이즈가 출력 될 것이다. 그렇다면 사이즈를 설정해주면 된다. width = "300px" 를 입력시 가로가 300픽셀로 설정되며 세로 길이는 그에 맞게 자동으로 설정되어서 아래와 같이 출력이 된다. 그럼 이렇게 작아진다! 그렇다면 웹페이지가 아닌 컴퓨터내에 저장되어있는 사진파일을 출력할때는 어떻게 하는지 알아보자 컴퓨터내에 저장된 사진 파일 삽입하기! 컴퓨터내에 저장된 사진 파일경로는 위와 같다. 동일한 .. 2021. 7. 22.

이전 1 2 3 4 5 6 7 다음

728x90

티스토리툴바