본문 바로가기

728x90

HTML + CSS 시리즈🕸/HTML & CSS 시리즈(V 1.0)25

DIV 태그 Span 태그 | HTML & CSS 시리즈 013 div 태그 를 설명하기 위해 먼저 영화 소개하는 웹사이트를 예시로 들어 보겠다. 어떤 내용을 감싸주고 싶을때 사용한다. => 요소와 요소를 감싸주는 역할을 한다. div 태그로 각각의 영화를 감싸면서 가독성을 높여준다. 위 사이트 코드는 아래와 같다. My Favorite Movies Interstella 인터스텔라 영화 소개 요약.... Interstella 인터스텔라 영화 소개 요약.... Interstella 인터스텔라 영화 소개 요약.... div 태그와 비슷한 span 태그! 요소와 요소를 감싸준다는 점이 똑같지만 결정적인 큰 차이점이 있다. 그것은 바로 div 태그는 새로운 줄로 간 다음 요소를 묶어준다면 span 태그는 원래 있던 글의 위치에 영향을 주지 않는다. 위 두 사진을 비교해보면 .. 2021. 7. 23.

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.

이전 1 2 3 4 5 6 7 다음

728x90

티스토리툴바