1       VCS

VCS Revision Control로 문서 또는 프로그램의 Version Control Source Control을 관리해주는 프로그램이다.(http://en.wikipedia.org/wiki/Revision_control)

전통적인 SVN, CVS  Distributed revision control Git 또는 Mercurial이 많이 쓰인다.




1.1      SVN

서브버전(Subversion) 자유 소프트웨어 버전 관리 시스템이다. 명령행 인터페이스에서 사용하는 명령어를 따서 “SVN”이라고 줄여서 부르기도 한다. 제한이 있던 CVS를 대체하기 위해 2000년부터 콜랩넷에서 개발되었다.[1] 현재는 아파치 최상위 프로젝트로서 전세계 개발자 커뮤니티와 함께 개발되고 있다.

서브 버전은 서버-클라이언트 모델을 따른다. 서버는 작업하는 컴퓨터내에 둘 수도 있고, 전산망에 연결된 별도의 컴퓨터에 두고 사용할 수도 있다. 서브버전 서버와 클라이언트는 http, https, svn, svn+ssh의 규약으로 통신한다.

SVN Wiki




1.2      Visual SVN

Windows를 위한 Subversion 기반으로 작성된 VCS 프로그램이다.




2       Issue Tracker

이슈 관리 시스템(Issue Tracking System)은 버그, 요구사항, 작업내용 등이 있을 때 해당 시스템에 게시물 형태로 올리고 개발자,
테스터들이 작업 진행상황을 기록하는 시스템을 말합니다.

이슈관리시스템은 자유 소프트웨어 버전 관리 시스템이다. 명령행 인터페이스에서 사용하는 명령어를 따서 “SVN”이라고 줄여서 부르기도 한다. 제한이 있던 CVS를 대체하기 위해 2000년부터 콜랩넷에서 개발되었다.[1] 현재는 아파치 최상위 프로젝트로서 전세계 개발자 커뮤니티와 함께 개발되고 있다.

서브 버전은 서버-클라이언트 모델을 따른다. 서버는 작업하는 컴퓨터내에 둘 수도 있고, 전산망에 연결된 별도의 컴퓨터에 두고 사용할 수도 있다. 서브버전 서버와 클라이언트는 http, https, svn, svn+ssh의 규약으로 통신한다.




2.1      Redmine

Redmine 오픈소스 프로그램으로 웹기반의 프로젝트 관리  버그 추적 기능을 제공하는 도구이다. 화면기반의 프로젝트 관리에 도움이 되도록 달력과 간트 차트를 제공하고 일정관리 기능을 제공한다. Redmine은 통합된 프로젝트관리 기능과 이슈추적, 여러가지 형상 관리 기능을 제공한다.

Redmine의 디자인은 비슷한 기능을 가지는 오픈소스 프로그램인 Trac에 영향을 많이 받았으며 루비 레일즈에 기반하여 작성되었고 멀티 플랫폼을 지원하며 여러가지 종류의 데이터베이스를 지원한다.

Redmine wiki




3       Build Automation Tool

3.1      Apache Ant

Apache Ant 자바 프로그래밍 언어에서 사용하는 자동화된 소프트웨어 빌드 도구이다. 유닉스 리눅스에서 사용되는 make와 비슷하나 자바언어로 구현되어 있어자바 실행환경이 필요하며 자바 프로젝트들을 빌드하는데 표준으로 사용된다.

make와 눈에 띄는 가장 다른 부분은 빌드를 위한 환경구성을 XML 파일을 사용한다는 점이다. 기본적인 빌드 파일명은 build.xml 이다.

로고는 이름(ANT)에 따라 개미 모양으로 만들어졌으나 이는 Another Neat Tool 약어라고 한다. [1]

최초 빌드 도구로서 제작되었으나 점점 많은 기능이 추가되면서 빌드와 배포, 유닛 테스트 등을 포함하는 통합 툴로서 발전되고 있다.

Aapache Ant wiki




4       CI

소프트웨어 공학에서, 지속적인 통합(continuous integration, CI)은 지속적으로 퀄리티 컨트롤을 적용하는 프로세스를 실행하는 것이다. - 작은 단위의 작업, 빈번한 적용. 지속적인 통합은 모든 개발을 완료한 뒤에퀄리티 컨트롤을 적용하는 고전적인 방법을 대체하는 방법으로서 소프트웨어의 질적 향상과 소프트웨어를 배포하는데 걸리는 시간을 줄이는데 초점이 맞추어져 있다.

make와 눈에 띄는 가장 다른 부분은 빌드를 위한 환경구성을 XML 파일을 사용한다는 점이다. 기본적인 빌드 파일명은 build.xml 이다.

로고는 이름(ANT)에 따라 개미 모양으로 만들어졌으나 이는 Another Neat Tool 약어라고 한다. [1]

최초 빌드 도구로서 제작되었으나 점점 많은 기능이 추가되면서 빌드와 배포, 유닛 테스트 등을 포함하는 통합 툴로서 발전되고 있다.

지속적인통합 wiki




4.1      Jenkins

Jenkins 2011년 오라클의 상표권 침해 문제로 인해 Hudson에서 명칭이 바뀌어 배포되는 지속적 통합관리 툴 중 하나이다. 이름만 바뀌었지 기능 향상과 지원은 계속 유지되고 있다.

반복되는 작업의 실행을 모니터링하는 프로그램으로 주로 프로그램을 빌딩하거나 주기적으로 정해진 작업을 실행한다.




4.2      JUnit

JUnit Java언어를 위한 Unit Testing Framework이다. Junit TDD(Test-Driven-Development)에서 중요한 툴이며, 또한 xUnit 이라 알려진 Testing Framework 종류 중 한가지이다.

Junit Wiki




4.3      PMD

PMD JAVA Source Code를 해석하여 정해진 RuleSet을 사용하여 잠재적인 문제를 찾아주는 툴이다.

l  가능한 버그 추적(ex. Empty try/catch/finally/switch blocks)

l  쓰이지 않는 코드(ex. Local Variables, parameters & private methods)

l  Empty if/while statements.

l  중복된 코드

등 에러와 비효율적인 코드를 찾아내어 더 나은 코드를 작성할 수 있도록 도와준다.

PMD Wiki

 



5       Tutorial

Tutorial Visual SVN, Redmine, Jenkins를 연동하여 Build Build Junit PMD 결과물을 Jenkins에서 보는 것을 목표로 한다.

Tutorial Eclipse가 설치 되어있는 상태를 전제로 한다.

SVN Server로는  VisualSVN(Version 2.5.9) Client Eclipse Plug-in    Subversive SVN Team Provider을 사용하였다.

VisualSVN http://www.visualsvn.com/ 에 가서 다운받아 설치한다.

설치 방법은 블로그(http://www.phpk.org/archives/181) 에 상세히 소개 되어있다.

SVN 설치 후에는 Tutorial용 프로젝트를 생성한다. 간단하게 HelloWorld를 생성하여 Say Hello를 출력하는 Main Class를 작성한다.

그리고 해당 프로젝트를 SVN Client를 통해 Server Check-in한다.

SVN. + Redmine연동 테스트를 해보자. 테스트는 Task 생성 후, Commit처리시 Comment작성하여 완료 체크로 이루어진다.

그 전에 Redmine에 간단한 설정을 해주어야 한다. 특정 단어가 들어간 경우에 특정 상태, 진척도로 변경 가능하도록 해보자.

여기서는 end가 들어갔을 때 완료 100%로 만들도록 설정한다.

전체 설정에 저장소 탭에서 설정한다. 그리고 Eclipse에서 코드를 등록한 키워드와 일감 번호를 Comment에 적어 Commit하게 되면 아래의 그림과 같이 테스트를 성공 할 수 있다.

이제 CI를 위해 Ant Jenkins 순으로 설치를 해보자. Anthttp://ant.apache.org/

젠킨스는 http://jenkins-ci.org/  에서 차례도록 다운받아 설치하자. Jenkins를 설치하는 방법에는

1, Standalone

2. Tomcat + Jenkins.war import

이상 두가지가 있는데 여기서는 2번을 택해 진행하겠다.

(1번은 설치파일을 받아 진행하면 어려움이 없다.)

Jenkins를 설치하고 Jenkins관리에서 JAVA Path Ant Path를 설정해주면 간단한 설정이 끝난다.

앞서 만든 HelloWorld 프로젝트를 위해 새로운 Job을 만들자.

젠킨스는 http://jenkins-ci.org/  에서 차례도록 다운받아 설치하자. Jenkins를 설치하는 방법에는

1, Standalone

2. Tomcat + Jenkins.war import

이상 두가지가 있는데 여기서는 2번을 택해 진행하겠다.

(1번은 설치파일을 받아 진행하면 어려움이 없다.)

 

Jenkins를 설치하고 Jenkins관리에서 JAVA Path Ant Path를 설정해주면 간단한 설정이 끝난다.

이제 Jenkins + SVN 연동 테스트를 위해 build.xml작성하여 프로젝트 Root Commit, Ant를 통한 자동 Build가 이루어지도록 해보자

<project name="HelloWorld" basedir="." default="main">

        <description>

            Print 'Say Hello' to Console

        </description>

        <property name="src.dir" value="src" />

        <property name="build.dir" value="build" />

        <property name="classes.dir" value="${build.dir}/classes" />

        <property name="jar.dir" value="${build.dir}/jar" />

        <property name="report.dir" value="${build.dir}/report" />

        <property name="main-class" value="com.sds.etl.vasco.HelloWorld" />

 

        <target name="clean">

               <delete dir="${build.dir}" />

        </target>

        <target name"compile">

               <mkdir dir="${classes.dir}" />

               <mkdir dir="${report.dir}" />

               <javac srcdir="${src.dir}" destdir="${classes.dir}"/>

        </target>

        <target name="jar" depends="compile">

               <mkdir dir="${jar.dir}" />

               <jar destfile="${jar.dir}/${ant.project.name}.jar" basedir="${classes.dir}">

                       <manifest>

                       <attribute name="Main-Class" value="${main-class}" />

                       </manifest>

               </jar>

        </target>

        <target name="run" depends="jar">

               <java jar="${jar.dir}/${ant.project.name}.jar" fork="true" />

        </target>

 

        <target name="clean-build" depends="clean,jar" />

        <target name="main" depends="clean,run" />

</project>

작성된 파일을 프로젝트 Root Commit하고 Successful Build가 이루어지길 바란다.

 

여기에 Junit 결과와 PMD 결과를 Jenkins에서 볼 수 있도록 설정해보자.

Junit 관련 Plugin은 기본 설치되어 있지만, PMD 관련 Plugin은 추가적으로 설치해주어야 한다. 설정의 플러그인 관리를 통해 Static Analysis Utilities , PMD Plug-in , Analysis Collector Plugin 을 설치하자.

혹시 자동설치가 안된다면 관련 Pluginhttp://updates.jenkins-ci.org/download/plugins/ 을 통해 받아 수동설치가 가능하다.

기존 Build.xml JUnit PMD실행 스크립트를 작성하고,

------------------------중략----------------------------

<property name="pmd.home" value="C:\pmd-src-5.0.3" />

        <path id="junit.class.path">

               <pathelement location="lib/junit.jar" />

               <pathelement location="lib/hamcrest.jar" />

               <pathelement location="${build.dir}" />

               <pathelement location="${classes.dir}" />

        </path>

------------------------중략----------------------------

        <target name="jar" depends="compile">

               <mkdir dir="${jar.dir}" />

               <jar destfile="${jar.dir}/${ant.project.name}.jar" basedir="${classes.dir}">

                       <manifest>

                       <attribute name="Main-Class" value="${main-class}" />

                       </manifest>

               </jar>

        </target>

------------------------중략----------------------------

        <!-- Main Build -->

        <target name="main" depends="clean,run, junit, pmd_4.3" />

        <!-- JUnit Ant 설정 -->

        <target name="junit" description="Perfrom JUnit Test ">

               <junit printsummary="on" fork="yes" haltonfailure="yes">

                   <!-- JUnit 관련 ClassPath 설정 -->

                       <classpath refid="junit.class.path" />

                       <formatter type="xml" />

                       <!-- Bacth형으로 Test 실행 -->

                       <batchtest todir="${report.dir}">

                              <fileset dir="${src.dir}">

                                      <include name="**/*Test*.java" />

                              </fileset>

                       </batchtest>

               </junit>

        </target>

        <path id="pmd.classpath">

  <pathelement location="${pmd.home}" />

  <fileset dir="${pmd.home}/lib" includes="*.jar" />

  </path>

 <!--  pmd Ant 실행 파일 설정   -->

 <!--  pmd Ant Target 설정 Target =pmd 설정.  -->

 <target name="pmd_4.3" >

  <taskdef name="pmd" classname="net.sourceforge.pmd.ant.PMDTask" classpathref="pmd.classpath" />

  <mkdir dir="${report.dir}/pmd" />

 <!--  소스코드를 검사할 PMD 규칙이 설정된 파일 지정  -->

 <pmd rulesetfiles="rulesets/basic.xml">

 <!--   분석결과 파일 저장 위치 지정   -->

  <ruleset>basic</ruleset>

  <formatter type="xml" toFile="${report.dir}/pmd/pmd_report.xml" />

 <fileset dir="${src.dir}">

  <include name="**/*.java" />

  </fileset>

  </pmd>

  </target>

</project>

프로젝트의 설정에서 Post-build Actions Publish JUnit test result report , Publish PMD analysis results 에 앞서 지정한 결과파일위치를 설정해주면 결과를 Jenkins를 통해 확인 할 수 있다.

http://blog.naver.com/PostView.nhn?blogId=davincigo&logNo=60133197554&parentCategoryNo=&categoryNo=&viewDate=&isShowPopularPosts=false&from=postView

+ Interface를 Class Format으로 변경하는 법 : http://stackoverflow.com/questions/6789112/staruml-defining-interface-methods-and-attributes-in-the-interface-icon

+ final과 static을 표현하는 법 : http://blog.cjred.net/175

'0x01 Programming > 0x016 UML' 카테고리의 다른 글

StarUML 사용  (0) 2013.02.26
#4. Behavior Diagram  (0) 2011.12.18
#3.Structural Diagram  (0) 2011.12.16
#2. 관계(Relation)  (0) 2011.12.14
#1. UML개요  (0) 2011.12.14
#1 . UML 개요  (0) 2011.12.05

http://blog.naver.com/PostView.nhn?blogId=naverdev&logNo=120116323974&parentCategoryNo=8&viewDate=&currentPage=1&listtype=0

가상클래스



맏이만 선택해 주는 :first-child 가상클래스


가상클래스는 특정한 '사건'이 발생하면 사용할 수 있습니다. 그리고 특정한 '조건' 에도 사용할 수 있습니다.


:first-child 가상 클래스는 동일한 요소 중 가장 앞에 위치한 요소를 선택하도록 도와줍니다.


HTML 마크업

<ul>

<li>은혜갚은 까치</li>

<li>신데렐라</li>

<li>흥부놀부전</li>

<li>백설공주</li>

</ul>

CSS

li:first-child {font-weight:bold;color:red;font-size:25px;}


위의 예제는 4개의 동화 이름을 <ul>을 이용해서 목록으로 만든 것입니다. CSS를 보면 :first-child 가상 클래스를 이용해서


맨 앞에 있는 <li>만 텍스트의 크기와 색상을 바꾸도록 해두었습니다. :first-child는 이처럼 지정한 태그 중 가장 선두에 


위치하는 녀석을 선택할 수 있게 해줍니다. 결과 화면은 다음 그림과 같습니다.





라디오 버튼과 체크박스가 체크되어 있는지 점검하는 :checked 가상클래스


해당 클래스는 CSS3에 새로 추가된 가상 클래스입니다. 라디오 버튼이나 체크박스는 사용자가 직접 체크하고 체크를 해제할 


수 있는 UI 입니다. 이것들이 체크 되었을떄는 'checked'속성을 가집니다. 이 가상 클래스는 'checked' 속성을 가져와서 


동작합니다. 


HTML 마크업

<label><input type="checkbox" /><span>하하하</span></label>

CSS

input:checked+span {font-weight:bold; color:#ff0000;}


체크박스가 체크된 상태일 경우 <span>으로 감싸져 있는 텍스트를 굵게 하고 빨간색으로 만듭니다. 형제선택자 '+' 와 


':checked' 가상 클래스 선택자를 결합하여 사용하였습니다.


':checked' 가상 클래스가 작동하면 <span> 에 있는 글자의 스타일을 바꾸도록 되어 있습니다.


 참고로 이 선택자는 IE 8 이하 버전에서는 작동하지 않습니다.





자유롭게 반복하거나 선택하여 요소를 스타일링하는 :nth-child 가상클래스


:nth-child 가상 클래스는 CSS3에서 새로 소개된 가상 클래스입니다. 


해당 클래스를 사용하면 테이블에서 격줄로 건너뛰면서 색상을 칠해주는 등 사용자에게 시각적인 효과를 부여할 수 있습니다.


HTML 마크업

<ul>

<li>은혜갚은 까치</li>

<li>신데렐라</li>

<li>흥부놀부전</li>

<li>백설공주</li>

</ul>

CSS

li:nth-child(odd) {font-weight:bold;color:red;font-size:25px;}



<:nth-child 가상 클래스에서 받을 수 있는 인자의 종류>


odd 

홀수번 요소만 순서대로 선택함 

even

짝수번 요소만 순서대로 선택함 

숫자 

 임의의 숫자값을 넣어서 자유자재로 선택


Example) tr:nth-child(2n + 1) , tr:nth-child(4)


─ tag  CSS3, html5, 가상클래스

박스모델




박스모델 개념 잡기


HTML문서는 여러 개의 태그로 이루어져 있습니다. 


HTML문서에서 사용되는 모든 요소는 각각 하나의 박스라고 생각하면 이해하기 쉽습니다. 


<div>도 박스고, <span>도 박스입니다. <p>도 박스고 <img>도 박스입니다. 


각 요소들이 저마다 하나의 박스인 셈입니다. 



<CSS의 HTML 태그의 박스모델 구조도>


박스모델을 가장 쉽게 이해하는 방법은 콘텐츠 부분과 보더 부분, 즉 요소의 경계선 부분을 보는 것입니다.


실제로 패딩과 마진은 여백이 생기는 것 외에는 눈에 띄지 않지만 콘텐츠와 보더는 눈에 보이는 부분이고 


색을 주거나 꾸밀 수도 있습니다. 콘텐츠와 보더 사이에 여백을 주고 싶다면 패딩을 주면 됩니다.





CSS로 웹페이지의 디자인을 만들어 가는 작업의 대부분은 이 박스모델을 어떻게 다루느냐에 따라 달렸습니다.


패딩과 마진을 조정하면서 페이지의 전체적인 레이아웃과 세부적인 레이아웃을 잡아 나갑니다.


<p>안녕하세요. p태그를 이용해서 박스모델 하나를 만들었습니다.</p>

<p> 태그의 박스모델 생성


 {border : 1px solid #000; ; width : 300px; ; padding : 10px;}

<p> 태그에 검정색 테두리 , 너비를 300px , 양쪽에 10px씩 패딩 적용


자 그럼 둥근 모서리를 갖도록 고쳐볼까요?



 {border : 1px solid #000; ; width : 300px; ; padding : 10px; , border-radius : 20px;}

사방에 20px의 값을 준 border-radius 속성이 적용된 모습


─ tag  CSS3, html5, 박스모델

특수선택자


CSS에서는 태그 이름과 클래스 이름, 아이디 이름을 이용한 선택자 외에도 특수한 선택자들을 제공합니다. 


이 특수한 선택자들의 문제는 일부 브라우저에서만 작동되는 경우가 많다는 것입니다. 


반면 CSS의 특수한 선택자들을 자유자재로 이용한다면 jQuery와 같은 프레임워크를 활용하는 데 매우 큰 도움이 될 것입니다. 


또한 앞으로 브라우저들이 특수한 선택자들을 더 많이 지원할 전망이기 때문에 희망적이라고 할 수 있습니다.





전역선택자


전역선택자는 별 선택자라고도 부릅니다. CSS2에서 추가된 선택자입니다. 흔히들 다음과 같이 사용하고 있을 것입니다.


* {margin : 0; padding : 0;}

* 선택자를 이용해서 페이지 내에 있는 모든 요소의 마진과 패딩을 0으로 초기화


이 CSS의 코드는 보통 CSS문서의 최상단에 넣어서 사용할 것입니다. 문서에 있는 모든 요소의 마진과 패딩을 '0'으로 초기화합니다. CSS의 전역 선택자인 '*'은 운영체제의 '*'과 비슷한 역할을 합니다. 


다른 예제 들도 알아보겠습니다.


div * {color : red;}

div 안에 있는 자식요소들 속에 포함된 텍스트를 빨간색으로 칠함


요소 * 방식으로 스타일을 사용하면 해당 요소 아래에 있는 요소들에 스타일 적용이 된다.


* div {color : red;}

모든 div 안에 있는 텍스트를 빨간색으로 칠함


div * strong { color : red;}

div 안에 있는 자식요소들 중 모든 strong에 포함된 텍스트를 빨간색으로 칠함


전역선택자는 이처럼 전역 선택자가 지정한 요소 아래에 있는 모든 요소의 속성을 일괄적으로 바꿀 때 유용합니다. CSS의 기본적인 상속을 무시하고 강제 적용합니다.




인접한 형제 선택자


형제 선택자를 잘 활용하면 조금 더 정밀하게 스타일을 적용할 수 있습니다. 인접한 형제 선택자는 '+' 기호로 사용합니다.


h1 + p {color : red;}

<h1> 태그와 가장 가까이 있는 <p> 태그 내에 텍스트를 빨간색으로 칠함.





속성 선택자


HTML 태그에는 다양한 속성들이 함께 사용됩니다.


예를 들면 img 태그에는 alt 라는 확장 태그가 있습니다. alt 속성은 이미지를 식별 할 수 있는 텍스트를 넣을 수 있습니다.


<img src="google.gif" alt="구글">

<img>태그에 구글의 로고 이미지를 불러오고 '구글'이라는 텍스트를 alt속성에 부여


img[width|="500"] {border : 10px #ff0000 solid;}

<img> 태그로 가져온 이미지의 너비가 500px인 경우 10px두께의 빨간 테두리를 침

<img src="google.gif" width="500" alt="구글">






CSS는 HTML문서를 스타일링해 줄 디자인 정보를 가지고 있습니다.


HTML 문서에 CSS를 이용해서 디자인을 적용하는 방법에는 크게 3가지가 있습니다. 





태그에 직접 스타일을 주는 방법



<a href="http://www.monoeyes.com" style = "font-weight: bold; color:red;">쏭군 블로그</a>

<태그에 직접 스타일 적용하기>


이 방법은 딱 하나의 태그를 위해 사용하는 방법입니다. 


위의 코드에서는 해당되는 <a> 태그 하나에만 굵고 빨간 효과가 적용됩니다. 


다른 태그들에게는 아무런 영향도 미치지 않습니다.


이 방법은 아주 부득이한 사정이 없는 이상 사용을 피하는 것이 좋습니다. 


사이트의 규모가 크고, 페이지의 수량이 많은데 일일이 이런 방식으로 스타일이 붙어 있다면,


 사이트를 수정하거나 유지보수하는 데 많은 애로 사항이 있을 것입니다. 


그러나 어쩔 수 없이 써야 한다면 그 경우에는 예외입니다.





<style> 요소를 활용하여 HTML 내에서 사용하는 방법


<html>

<head>

<meta charset="UTF-8">

<title>CSS 연습</title>

<style type="text/css">

a {"font-weight: bold; color:red;"}

</style>

</head>

<body>

<a href="http://www.monoeyes.com" >쏭군 블로그</a>

</body>

</html>

<HTML 문서 내에 <style>태그를 사용하여 CSS적용하기>


이 방법은 HTML 파일의 <head> 또는 <body>에 <style> 태그를 선언함으로써 사용이 가능합니다. 


이 방법은 스타일이 삽입된 HTML파일, 즉 페이지 하나에 전부 영향을 미칩니다.


단, 해당 HTML파일 이 외에 다른 HTML파일에는 아무런 영향도 미치지 않습니다.





외부의 CSS파일을 링크하는 방법


a {"font-weight: bold; color:red;"}

<style.css>

<html>

<head>

<meta charset="UTF-8">

<title>CSS 연습</title>

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

</head>

<body>

<a href="http://www.monoeyes.com" >쏭군 블로그</a>

</body>

</html>


이 방법은 가장 널리 사용되는 방법입니다. 아예 웹사이트의 모든 디자인 정보를 CSS파일에 몰아넣고, 


HTML에서는 이 CSS파일을 링크하여 사용하는 방법입니다. 


이 방법은 CSS파일 하나로 여러 개의 웹페이지 디자인을 관리할 수 있다는 장점이 있습니다. 


또한, 미디어 타입을 지정하여 각 기기별로 최적화된 화면을 제공할 수 있습니다.





방법별 스타일을 적용하는 우선 순위


이 세가지 방법 중 스타일을 중복 적용하는 태그가 있다면 어떤 방식이 가장 우선적으로 적용될까요? 


그 순서는 다음과 같습니다.


  • 1순위 : 태그에 직접 스타일을 지정해 주는 방법
  • 2순위 : <style>요소를 이용해서 한 페이지에 스타일을 지정해 주는 방법
  • 3순위 : 외부의 CSS파일을 링크하여 스타일을 지정해 주는 방법



─ tag  CSS3, html5

JavaScript Pattern 중 BehaviorPattern 중 하나인

 

Chain-of-Responsibility Pattern을 주제로 작성한 PPT



Chain-of-Responsibility Pattern.pdf


'0x01 Programming > 0x014 디자인패턴' 카테고리의 다른 글

# Chain-of-Responsibility Pattern  (0) 2012.09.15
# Observer Pattern  (0) 2012.08.24
#Composite Pattern  (0) 2012.07.02

HTML5도 엄연히 하나의 문서입니다. 당연히 이 문서 안에는 글도 들어갈 수 있고 그림도 들어갈 수 있습니다. 


글과 그림은  일반 워드프로세서의 문서처럼 나열되면서 흐르게 됩니다. 그러나 일반 워드프로세서와 다른 점이 있습니다.


그것은 바로 HTML문서에는 블록레벨(block level)요소와 인라인(inline)요소라고 하는 두 개의 큰 흐름의 줄기가 있다는 겁니다.





블록레벨 요소


<div>나  <p>,<h1>과 같은 요소들은 블록레벨 요소입니다. 블록레벨 요소의 특징은 줄 바꿈 태그인 <br>과 같은 요소를 


쓰지 않아도 스스로 줄 바꿈이 된다는데 있습니다. 이 요소들은 기본적으로 문서 내에서 가로로 흐르지 않고 세로로 흐릅니다.


그리고 주변에 일정량의 공간을 만듭니다. 또한 너비를 지정해 주지 않으면 풀사이가 되어 가로로 가득 찹니다. CSS를 


적용하지 않고 이 요소들을 브라우저에서 확인해 보면 세로로 쭉 나열되는 것을 볼 수 있습니다. 블록레벨 요소는 


가로, 세로 일정량의 여백을 가지고 있는데 이것은 브라우저마다 조금씩 다릅니다.


<h1>블록레벨 요소</h1>

<p>블록 레벨 요소는 BR태그 없이도 기본적으로 세로로 요소가 정렬됩니다.</p>

<div>너비는 풀사이즈, 그리고 위아래에 약간의 여백도 자동으로 붙고요...</div>

<블록레벨 요소의 예>




인라인 요소


<img>, <span>, <strong>과 같은 요소들은 인라인 요소입니다. 


이 요소들의 특징은 줄 바꿈 태그를 사용하지 않거나 블록레벨 태그 안에 단독으로 포함하지 않는 한 가로로 쭉 나열된다는 데 있습


니다. 그리고 이 요소들의 주변에는 공간이 생기지 않습니다.


문법적으로는 인라인 요소 안에 블록레벨 요소가 들어가면 안됩니다. 블록레벨 요소 안에 인ㄹ아ㅣㄴ 요소가 포함되록 마크업해야


문법을 바르게 준수 할 수 있게 됩니다.


<span>인라인 요소 : </span>

<strong>가로</strong>쭉 나열됩니다. 물론 너비는 딱 자기가 가진 만큼만 가지고요.

<블록레벨 요소의 예>


블록레벨 태그 안에는 인라인 레벨 태그가 들어갈 수 있습니다. 아니 들어가야만 하는 경우가 많습니다.


그러나 문법적으로 인라인 레벨 태그는 블록레벨 태그를 담을 수 없습니다. 

<블록레벨 태그와 인라인 레벨 태그를 쉽게 이해할 수 있는 구조도>


인라인 레벨 태그는 기본적으로 옆으로 흐릅니다. 블록레벨 태그는 아래로 흐릅니다.


너비 또한 화면 전체를 차지합니다. 


자 그러면 도대체 언제 어떤 태그를 사용해야 할까요?


특정단어를 강조하고 싶을때는 <b>태그보다 <strong>태그를 사용하는 것이 좋습니다. 외관상으로는 두 태그 모두


텍스트를 굵게 보이게 하여 강조해 주지만, <b>태그는 단지 굵게 만들어 줄 뿐 강조하는 아무 의미가 없는 태그입니다.


반면에 <strong>태그는 외형적으로도 텍스트를 굵게 해주고 실제로 의미있는 텍스트라고 강조해 주는 역할도 합니다.


웹사이트의 메뉴나 목록형태의 콘텐츠를 만들 때는 <ul>과 <li>태그를 조합합니다.


만약에 사이트의 이용약관과 같이 목록 앞에 일정한 숫자를 순차적으로 붙이고 싶을 때는 <ol>, <li> 를 이용하면


관리하기도 쉬운 훨씬 의미 있는 마크업이 됩니다.


<span>이나 <mark>와 같은 태그는 특정한 부분에 별다른 의미를 부여하지 않아도 시각적으로 무언가 효과를


주고 싶을 때 사용합니다. <span>으로 감싸고 CSS로 접근을 하여 스타일링을 하면 되겠습니다.


이 밖에도 주로 레이아웃을 짜거나 박스를 만들 때는 <div>를 많이 사용했는데, HTML5에서는 이것이 조금 더 세분화 되었습니다.


부분별로 <header>, <footer>, <section>과 같은 태그를 사용하면 됩니다.




<앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS3> 에서 발췌





openclose