문자관련

문서관련

문서관련

문서관련

문서관련

문서관련

<!-- p 단락태그 -->
<!-- p>lorem -->
<!-- html에서는 여러개의 공백, 개행 문자는 모두 공백하나로 취급 -->
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    <br>  Mollitia, maiores porro commodi eaque officia iste tempore! 
    <br>  Voluptatem voluptas facere labore tenetur eum mollitia! Libero,
    <br> esse nulla explicabo suscipit eveniet dicta.</p>
      <!-- 공백 : &문자를 사용해서 공백, 특수문자 표현 가능 => &nbsp; -->
<p>Lorem &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ipsum dolor sit amet consectetur adipisicing elit.
    <br>  Eius perferendis delectus deleniti vel voluptates.
     <!-- <br> 개행문자 -->
     <br>   Fuga quo ducimus unde hic et magni aspernatur facilis,
      <br> 
      alias fugit! Nulla quas omnis quo labore?</p>
    <p>
        <!-- <pre> : pre-formatted text : 안에서는 공백 및 개행문자 처리 가능 -->
        <pre>Lorem ipsum dolor sit,
             amet consectetur adipisicing elit. Beatae officiis eaque, 
             quae vitae quis iusto esse temporibus consequuntur aliquam? 
             Libero quas nam, 
             quisquam voluptates eos aliquam debitis nobis doloremque hic?</pre>
    </p>
    <h2>특수문자 입력 : &문자</h2>
    <!-- 특수문자 입력 -->
    <a href="http://kor.pe.kr/util/4/charmap2.htm">html특수문자표</a>
    <!-- <p>"특수문자" & <tag></p> -->
    &lt;p&gt; &quot;특수문자&quot; &amp; &lt;tag&gt;;&lt;&#47;p&gt;

    <!-- <![CDATA[]]> -->

    <h2>PhraseTag</h2>
    <p>문자관련 semantic태그</p>
    <p>누구나 웹정보를 동일하게 사용하기 위해
        스크린리더(Screen Reader)가 읽어서 처리할 수 있는 시맨틱태그를 사용해야 한다.
    </p>

    <em>기울여서 문구를 강조(emphasize)한다</em>
    <br>
    <strong>굵게 bold체로 강조한다.</strong>
    <br>
    <del>del - 취소선을 추가한다.</del>
    <br>
    <mark>mark - 형광펜 효과</mark>
    <br>
    <ins>ins - 글자에 밑줄을 insert한다.</ins>
    <br>
    <!-- sementic태그를 사용하지 않은 예 -->
    <i>시맨틱태그를 하지않아도 
    <span style="text-decoration: underline;">시멘틱 효과를 사용하지않아도, 기울임 효과</span>를 줄수 있다</i>

    <br>
    <code>System.out.println("hellow");</code>은 자바의 콘솔출력 구문이다.
    <br>
    <abbr title="Internet Of Things">IOT</abbr>은 각종 사물에 센서와 통신기능을 내장해 인터넷에 연결하는 기술.
    <br>
        <!-- 중첩사용가능 -->
    <mark><strong>완전 강조!!!</strong></mark>
    

    <h2>inline 요소 |  block 요소</h2>
    <span>inline태그는 줄바꿈 되지 않는다.</span>
    <span>여러줄에 나누어써도 한줄로 처리된다.</span>
    
    <p>bolck 요소는 </p>
    <p>한줄을 전부 차지한다.</p>