HTML CSS 강의(1) - 기본 블록





HTML CSS를 처음 다루시는 분들께선 다가가기 낯설 수 밖에 없습니다.
우선 CSS의 기본 틀을 보여드리면서 설명하는 방식으로 접근해보겠습니다.

head 태그 안에 style 태그가 추가 된것을 볼수있습니다.

style 태그안에 h1이 써져있습니다.
여기서 h1은 선택자, color 와 background-color은 스타일 속성, red 와 orange는 스타일 값이라고 불립니다.

위에 주어진 대로 작성하시면

이렇게 출력될것입니다. 물론 웹 제목은 CSS3 Selector Basic이라 나옵니다. (title 태그)

이제 출력된 값을 풀이해보자면 style 태그에서 h1태그는 출력시 텍스트 색은 빨간색, 배경 색은 주황 색으로 나오게 하려고 값을 입력해줬습니다.
그리고 body 태그에서 h1태그를 출력하여 위에 주어진 설정으로 출력이 됩니다.
하지만 p태그는 스타일 시트에서 설정으로 따로 지정을 안해주었기에 p태그는 영향을 받지 않습니다.

p 태그까지 h1에 주어진 설정을 적용하고 싶으면 다음과 같이 입력해주시면 됩니다.

간단하게 h1을 p, h1로 바꿔주시면 됩니다. 참 쉽죠 ㅋㅋㅋㅋㅋ

이렇게 수정 후 출력하면

하... 참 쉽습니다.. 이게 끝입니다..ㅋㅋㅋㅋㅋㅋ

원래 HTML은 이해 못해도 따라하다보면 자연스럽게 이해하게 됩니다 :)

이상 숙제를 남기고 1편을 마칩니다 ㅎㅎ

숙제 : 이렇게 출력해보세요 (답은 올려드릴게요! 해보고 맞춰보세요 ><)
https://sites.google.com/site/css1gibonbeullogsugje/css-1---gibon-beullog-sugje/1%E1%84%80%E1%85%A1%E1%86%BC%28%E1%84%80%E1%85%B5%E1%84%87%E1%85%A9%E1%86%AB%20%E1%84%87%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A9%E1%86%A8%29.html?attredirects=0&d=1

댓글

댓글 쓰기

이 블로그의 인기 게시물

[안드로이드 스튜디오 APK] 메모장 Memo 오픈 소스

이미지
아래 영상은 밑에 보이는 소스를 응용해서 추가적인 기능을 넣어서 영상을 찍은 것입니다. 다음은 기본 메모장 소스입니다. activity_main.xml 1 2 3 4 5 6 7 8 9 10 11 12 13 14 < ?xml   version = "1.0"   encoding = "utf-8" ? > < LinearLayout   xmlns:android = "http://schemas.android.com/apk/res/android"         android:layout_width = "match_parent"         android:layout_height = "match_parent"         android:id = "@+id/activity_main" >       < EditText                 android:id = "@+id/editText"                 android:layout_width = "match_parent"                 android:layout_height = "match_parent"                 android:gravity = "top"             ...
계속 읽기

[C 언어] 하노이 탑 Tower of Hanoi

이미지
1 2 3 4 5 6 7 8 9 10 11 12 #include   < stdio.h > void  hanoi_tower( int  n,  char  from,  char  tmp,  char  to){      if (n  >   0 ){         hanoi_tower(n - 1 , from, to, tmp);          printf ( "원판 %d을 %c에서 %c으로 옮긴다.\n" ,n,from,to);         hanoi_tower(n - 1 , tmp, from, to);     } } main(){     hanoi_tower( 5 ,  'A' ,  'B' ,  'C' ); } Colored by Color Scripter cs 실행화면
계속 읽기

[Swift] (1) IOS 앱 개발 준비

이미지
안드로이드는 대표적으로 안드로이드 스튜디오, 이클립스 등 프로그램을 사용하고 IOS는 대표적으로 Xcode 프로그램을 사용합니다. 이번 시간에는 IOS 의 언어인 Swift에 대해서 같이 공부할 것입니다. Swift가 뭔지 간단하게 설명하자면 IOS는 원래 오브젝티브-C 언어를 기반으로 만들어졌지만 세계 개발자 대회(WWDC 2014)에서 Swift가 공개되고 2년동안 수정하고 보완성을 강화시켜 현재로서 Swift가 대표 언어가 되었습니다. 이 글은 Mac 유저를 기준으로 설명합니다. 1. Xcode를 설치합니다. App Store에 들어가서 xcode를 검색하신후 다음과 같은 앱을 설치해주시면 됩니다. 들어가시면 이런 화면이 뜨는데 이걸 눌러주시면 됩니다. 그럼 이런 화면이 나올텐데 Next 눌러주시면 됩니다. 그러면 어디에 저장하실 건지 나오실텐데 전 Desktop으로 지정한 후에 Create를 눌렀습니다. 그럼 이런 창이 뜨는데 성공입니다. 다음 시간 부터는 스위프트 문법에 대해 설명해드리도록 하겠습니다. 윈도우에서 개발을 하고 싶다면  https://swiftlang.ng.bluemix.net/ #/repl  들어가서 해주시면 됩니다.
계속 읽기