CSS 수업

HTML을 꾸며주는 아름다운 언어

CSS 수업 HTML을 꾸며주는 아름다운 언어

텍스트 꾸미기

span 태그

텍스트는 태그가 아니라 컨텐트이기 때문에 텍스트를 꾸며주기 위해서는 텍스트를 감싸는 태그가 필요하다. 줄바꿈 없이 일부 텍스트를 꾸며주기 위해서는 꾸미려는 텍스트를 <span> 태그로 감싸고 여기에 효과를 준다. 

example1.html - (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		할지라도 그들의 관현악이며, 사는가 있음으로써 <span style="color:red">생명</span>을 힘있다.
	</body>
</html>

텍스트에 컬러를 부여할 때는 color 효과를 사용한다. CSS에서는 색상을 지정하는 3가지 방법이 있는데 아래와 같다. 

Hex 16진수로 색상 값을 표현, #ff0000 (붉은색), #00ff00(초록), #0000ff(파랑)
RGB 붉은색, 초록, 파랑의 값을 조합해서 색상 값을 표현,  RGB(255,0,0), RGB(0,255,0), RGB(0,0,255)
별명 red, blue, green등 칼러코드 참고

example2.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style>
			#hex {
				color: #FF0000;
			}
			#rgb {
				color: RGB(255,0,0);
			}
			#name {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="hex">
			hex (color:#ff0000)
		</div>
		<div id="rgb">
			RGB (color:RGB(255,0,0))
		</div>
		<div id="name">
			Color Name (color:red)
		</div>
	</body>
</html>

정렬

텍스트를 정렬하기 위해서는 정렬하고자 하는 텍스트를 태그로 감싸고 이 태그에 text-align 효과를 지정한다. CSS에서는 4가지 형태의 정렬방식을 지원한다.

left 왼쪽 정렬
right 오른쪽 정렬
center 가운데 정렬
justify 양쪽 정렬, 텍스트 간의 간격을 조정해서 행의 간격을 일치시킴

example3.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style>
			div {
				margin: 30px;
				width: 500px;
			}
			#left {
				text-align: left;
			}
			#right {
				text-align: right;
			}
			#justify {
				text-align: justify;
			}
			#center {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="left">
			할지라도 그들의 관현악이며, 사는가 있음으로써 생명을
			<br />
			공자는 옷을 놀이 보이는 그림자는 평화스러운 열매를 품으며
			<br />
			용감하고 만물은 그들의 이것이다.
			<br />
			무엇을 날카로우나 꽃이 어디 뿐이다.
			<br />
			꽃이 웅대한 되려니와, 끓는 피가 만물은 있는 하는 듣는다.
			<br />
			대한 사람은 그들은 인간이 있는가?
			<br />
			발휘하기 구하지 웅대한 오아이스도 피어나기 무한한 불어
			<br />
		</div>
		<div id="right">
			할지라도 그들의 관현악이며, 사는가 있음으로써 생명을
			<br />
			공자는 옷을 놀이 보이는 그림자는 평화스러운 열매를 품으며
			<br />
			용감하고 만물은 그들의 이것이다.
			<br />
			무엇을 날카로우나 꽃이 어디 뿐이다.
			<br />
			꽃이 웅대한 되려니와, 끓는 피가 만물은 있는 하는 듣는다.
			<br />
			대한 사람은 그들은 인간이 있는가?
			<br />
			발휘하기 구하지 웅대한 오아이스도 피어나기 무한한 불어
			<br />
		</div>
		<div id="center">
			할지라도 그들의 관현악이며, 사는가 있음으로써 생명을
			<br />
			공자는 옷을 놀이 보이는 그림자는 평화스러운 열매를 품으며
			<br />
			용감하고 만물은 그들의 이것이다.
			<br />
			무엇을 날카로우나 꽃이 어디 뿐이다.
			<br />
			꽃이 웅대한 되려니와, 끓는 피가 만물은 있는 하는 듣는다.
			<br />
			대한 사람은 그들은 인간이 있는가?
			<br />
			발휘하기 구하지 웅대한 오아이스도 피어나기 무한한 불어
			<br />
		</div>
		<div id="justify">
			바도 급하고 꾀꼬리 김첨지는 하여간 전에 같이 몰랐다. 자기를 흐리고 없이 말은들었었는데. 왈칵 무시무시한 움푹한 옷도 하나 기다리고 예끼 돈을 대었다. 상판을딱딱 없으니, 그 멈춘 다니는 메이었다. 하고 달려들며 내기를 눈길을 같이 대한 벌었단 슬근슬근 높아졌다. 왜 가락이 바다 하고 제 언땅에 아니로되, 정거장까지 듯하였다. 만일 하고 남대문 정거장에서 꼬리를 붙었어, 정말 모르리라. 붙은 궂은 흘릴 알아 어찌할 울렸다. 염려를 전을 자식뻘밖에 문을 전이 살려준 모르리라. 운수가 그 빌어든 나를 걱정을 구워지는 남을 듯싶다. 너비아니 김첨지를 발길은 벌써 하고 치삼이와 하였다.
		</div>
	</body>
</html>

텍스트 장식

text-decoration

overline 윗줄 예제
line-through 취소선 예제
underline 밑줄 예제

line-height

행간격을 지정한다.

letter-spacing

문자와 문자사이의 간격을 지정한다. 참고

vertical-align

텍스트의 수직 정렬을 지정한다. 참고

white-space

줄바꿈되는 방식을 지정한다. 참고

댓글

댓글 본문
  1. sting
    111
  2. 후반양반무
    저도 자세히 아는편은 아니지만 span을 쓰는것이 표준인것으로 알고 있습니다.
    비표준 태그를 마구잡이로 쓰면 코드가 엉망이 되겠죠
    보통 범위를 잡아줄때 블럭방식이여야 된다면 div 인라인 방식이어야 된다면 span을 쓰는것으로 알고 있습니다.
    대화보기
    • 김종엽
      2016.08.24 완료!
    • Ian Si Mong Seong
      수강완료
      2016.08.01
    • 오미풍
      꼭 span을 써야 한다는 건 CSS문법인가요? 아니면 사용자들끼리 암묵적으로 지키는 규칙같은건가요?
      예를 들어 span 대신에 <abcd color="color:red"><abcd> 같이 아무 태그나 사용해도 효과는 있던데요..
    • glad9090
      color정말 이해 잘됬어요!!
    • 이승민
      잘봤습니다 ㅎ 역시 필요할때 찾아서 익히는게 좋은 방식이겠네요. 공부하는데 부담도 안되고요.
    • Rhys Jung
      잘 보고 또 하나 넘어갑니다.
    • I_LOVE_C
      최고
    • 강상모
      강의 잘보고있습니다 목소리 넘 좋으세요~~
    • JustStudy
      고맙습니다
    • 빨강머리앤
      감사합니다...^^
    • WayneKing
      고고고고고고고고
    • pillage
      당연한 이야기지만.. span 태그도 인라인 태그이지만 Class나 ID 아니면 Span 자체를 CSS 파일로 제어 가능합니다.. 예를 들면..

      span.life {
      color: red;
      }
      --------------------------------
      #life {
      color: red;
      }
      --------------------------------
      span {
      color: red;
      }
      요런식으로 활용이 가능합니다.. CSS의 장점은 외부 파일로 디자인을 자유자재로 변경하다는게 큰장점인데..
      이부분을 설명안해주신듯 합니다.. In-line이라고 하면 아 요 Span은 인라인으로만 해야되는구나 하고 오해할수도 있습니다 ㅎㅎ
    • nadia
      강의내용과는 상관없는 얘기지만^^; 예제 중 인용된 텍스트(example3.html) 같은 것은 어떻게 만들어지는 건가요? 가끔 인터넷 검색할 때도 저런 식의 의미없는? 여기저기 조합된 듯한? 텍스트들이 결과에 뜨곤 해서 궁금했어요.
    • 김시은
      잘들었습니다.^^
    • Yong Jin Kim
      감사합니다 이고잉님~~^^
    • Bruce
      대한민국<font color="blue"> 만세</font> <--이렇게 쓰는거와
      대한민국<span style="color:blue"> 만세</span> <--이렇게 쓰는게
      같은 결과 인데 무슨 차이인지....라는 질문 같습니다.

      egoing님 html 강의에서 <font>태그 쓰는 대신 CSS를 사용하라는 내용이 있었는데,
      이런 상황 이겠지요..?
      15년전이시면 꽤 옛날이네요;;;
      생활코딩 HTML수업에 font 태그는 반복적으로 사용할 일이 많아지기 때문에 CSS를 사용하라는 내용이 있습니다.
      대화보기
      • sudesigner
        css초보인 저에게는 두고두고 북마크 해노코 와야할 페이지 ^^
      • 크레용샘
        이번에도 화이팅했네요
        감사합니다!!!
      • 유노윤ho
        <b>하하</b>
      • 김민석
        감사합니다.
      • 열심히 배우는중
      • 늘생릭코네
        3개 모두 시청
      • egoing
        음 긍금하신 지점을 잘 모르겠어요 ^^
        대화보기
        • kush
          이고잉님 질문있습니다! (손)
          <font color="blue"> 만세 </font>
          이거랑 <span> 이랑은 뭐가 다를까요..?
          15년전 초등학생때 나모웹에디터 때 배운게 갑자기 생각나서 질문남겨봅니다_
        • YellowBall
          정말 잘 들었습니다. 감사합니다.
        • 엔터를 땅치면 요롷케
          감사합니다~
        • hyeju
          제 지식에서 빠진 부분을 채워주는 정말 유익한 수업입니다! 감사합니다 :-)
        • Kh Ryu
          line-height 부분 하이퍼링크가 '참고'가 아닌 '참'에 걸려있습니다. "..참</a>고</p>" 요렇게요!
        • Bitcoin
          크롬에서 우측 상단 방패표시가 보이시나요? unsafe script 어쩌구 하면서 뜨는데, 그것또한 표시해줘라 하고 승인을 해주면 뜨게 됩니다^^크롬에서는 배속기능이 있어 저도 크롬에서 강의를 수강하고 있습니다^^
          대화보기
          • 혜윤아빠
            선택자의 조합편까지는 크롬에서 동영상이 보이는데 이후 주제에서는 동영상이 표시가 되지 않습니다. 익스플로러에서는 정상적으로 모두 보입니다.
          • old 막내
            잘보고 갑니다.
          • 유형찬
            감사합니다!
          • mimiandchopa
            잘보았습니다
          • huziya
            감사합니다~ 열심히 보고있어요^^
          • 용12
            감사합니다 잘봤습니다.!!
          • egoing
            알려주셔서 고맙습니다. 수정 했습니다. ^^
            대화보기
            • 오종면
              잘 배우고 있는 중입니다. 복습 중인데요... 오타 하나 발견했습니다.text-decoration 값 중에 line-throught -> line-through (t) 늘 감사드립니다.
            • egoing
              아래 링크를 보시면 접속 경로를 파악하실 수 있을 겁니다.
              대화보기
              • frotime
                w3school에서 playit목록을 확인할 수 있는 방법이 있나요?
                필요할 때 찾아서 테스트하면서 써보고 싶어서그런데요.잘 못찾겠습니다.
              • jordan
                정렬에서 example3.html 중 id center에 대한 css가 빠졌어요.
              • Starmomo
                . span : 문서 내에서 글자를 꾸며 줄 때 사용.. text-align : 문서 내에서 또는 style에서 예) text-align : left [또는 right, center, justice] . 구문 장식: text-decoration(문자장식-윗줄, 밑줄, 취소선), line-height(줄간격), letter-spacing(글자간격), vertical-align(px, cm, +-, %, baseline/sub/super, top/text-top/middle/text-bottom/bottom. 선택 문장의 상중하 위치(간격)정렬), white-space(normal/pre-line/pre-wrap, nowrap/pre. 줄바꿈 지정)
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기