이번에는 <p> 태그와 <br> 태그에 대해서 공부 해봤다.

일반적으로 <p> 태그는 하나의 문단을 의미하고,

<br> 태그는 강제로 줄바꿈을 의미한다.

<p> 태그를 사용하면 문단으로 정의되기 때문에
<p></p>
<p></p>
사이에 어느정도 공백이 존재합니다.

<br> 태그를 사용하게 되면 강제 줄바꿈 ( Enter )가 되기 때문에
줄바꿈<br>
줄바꿈
이 된다면 사이 공백이 존재하지 않는다.

정도의 차이지만 HTML5의 웹표준으로 <br> 태그의 남용을 자제하고 있다.

<br> 태그를 사용하지 않고, 원하는 곳에서 줄바꿈 처리하는 방법
1. <p> 태그를 사용하고 style을 줘서 문단과 문단 사이의 간격을 없애도록 하자
2. <p> 태그에 고정 가로크기를 줘서 그 이상 넘어가면 자동으로 줄바꿈이 처리된다



'WEB > HTML' 카테고리의 다른 글

[HTML] <input> 태그의 type 속성  (0) 2017.11.27
[HTML] <span> 태그  (0) 2017.11.27
[HTML] <div> 태그  (0) 2017.11.27
[HTML] 오른쪽 클릭, 드래그, 선택 방지  (1) 2017.11.27
[HTML] div를 이용하여 타이틀 상단 고정, 내용만 움직이기  (0) 2017.11.27



div 태그는 분할하는 역할을 한다.

div 태그 같은 경우는 header, side-bar, main-body, footer 등등 위치를 지정하고
각각 독립된 영역을 지정해주는 엘리먼트이다.

<div> header </div>
<div> side-bar </div>
<div> main-body </div>
<div> footer</div>

라고 했을 때 각각 독립적인 영역이 지정된 것이고
css를 이용해서 스타일을 주면 된다.

div의 특징으로는 

<div> 내용</div><div> 내용</div>

이렇게 썻을때
`내용내용`
이런 식으로 출력되는 것이 아닌
내용
내용
이런 형식으로 출력이 된다.

css로 스타일을 지정해주지 않는 이상
div는 width의 전체를 차지하고, 내용이 없는 부분에는 margin으로 채워져서
내용
내용
형식으로 출력되게 되는 것이다.



'WEB > HTML' 카테고리의 다른 글

[HTML] <input> 태그의 type 속성  (0) 2017.11.27
[HTML] <span> 태그  (0) 2017.11.27
[HTML] <p>와 <br> 태그  (0) 2017.11.27
[HTML] 오른쪽 클릭, 드래그, 선택 방지  (1) 2017.11.27
[HTML] div를 이용하여 타이틀 상단 고정, 내용만 움직이기  (0) 2017.11.27



간혹 width에 padding과 margin을 사용하게 되면 width 따로 padding과 margin이 따로 적용되어서
원하는 사이즈가 나오지 않을 때가 있다.
그럴 때에는 width와 padding, margin을 합치는 css를 이용하면 된다.

box-sizing: border-box;

'WEB > CSS' 카테고리의 다른 글

[CSS] <ul> <li>로 테이블 만들기  (0) 2017.11.27
[CSS] 구글 웹폰트 사용하기  (0) 2017.11.27
[CSS] 자간 설정  (0) 2017.11.27
[CSS] @font-face 사용하기  (0) 2017.11.27
[CSS] 슬라이드하기  (0) 2017.11.27



contextmenu="return false"       우클릭 방지
ondragstart="return false"         드래그 방지
onselectstart="return false"       선택 방지

<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>



'WEB > HTML' 카테고리의 다른 글

[HTML] <input> 태그의 type 속성  (0) 2017.11.27
[HTML] <span> 태그  (0) 2017.11.27
[HTML] <p>와 <br> 태그  (0) 2017.11.27
[HTML] <div> 태그  (0) 2017.11.27
[HTML] div를 이용하여 타이틀 상단 고정, 내용만 움직이기  (0) 2017.11.27



위 아래 자간 설정은
line-height: 10px;

좌 우 자간 설정은
letter-spacing: 10px;

소숫점 단위까지 설정이 가능하며 눈에 뛰는 단위는 0.1 단위까지다.

'WEB > CSS' 카테고리의 다른 글

[CSS] 구글 웹폰트 사용하기  (0) 2017.11.27
[CSS] width에 padding과 margin을 포함시키기  (0) 2017.11.27
[CSS] @font-face 사용하기  (0) 2017.11.27
[CSS] 슬라이드하기  (0) 2017.11.27
[CSS] 위에서 아래로 그라데이션 주기  (0) 2017.11.27



@font-face{
    font-family: "font_name";
    src: local("?"), url("/font/font_name.woff") format("woff");
}

font-family는 html, body 같은 곳에서 사용될 폰트명을 지정해주는 것이다.

src의 경우는 local() 일 경우 local에서 현재 사용중인 폰트가 있는지 체크해주는 역할, 없을 경우
url로 넘어가 서버에 올라가 있는 폰트를 가져온다. format은 폰트의 글꼴 형식을 설정해주는 곳이다.

만약 다른 서버의 폰트를 사용하고 싶다면

url("http://font_server/font/fint_name.woff") 이런 형식으로 사용하면 되지만
서버에서 외부에서 자원을 사용하게 설정을 안하면 오류가 난다.

Host 설정 부분에 
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
을 추가해주면 오류를 해결할수 있다.

'WEB > CSS' 카테고리의 다른 글

[CSS] 구글 웹폰트 사용하기  (0) 2017.11.27
[CSS] width에 padding과 margin을 포함시키기  (0) 2017.11.27
[CSS] 자간 설정  (0) 2017.11.27
[CSS] 슬라이드하기  (0) 2017.11.27
[CSS] 위에서 아래로 그라데이션 주기  (0) 2017.11.27



이미지가 3개 기준

HTML

<div id="main_slide">
    <div class="wrap">
        <div id="slider">
            <div>
                <img src="">
                <img src="">
                <img src="">
            </div>
        </div>
    </div>
</div>

CSS

@keyframes slidy {
    0% { left: 0px; }
    20% { left: 0px; }
    30% { left: -100%; }
    50% { left: -100%; }
    60% { left: -200%; }
    80% { left: -200%; }
    100% { left: 0px; }
}

#main_slide {width: 100%;}
#main_slide > div.wrap > div#slider {overflow: hidden; position: relative;}
div#slider > div > img {width: 33.333333333333333333333333%; float: left;}
div#slider > div { 
    position: relative;
    width: 300%;
    margin: 0;
    top:0;
    left: 0;
    text-align: left;
    font-size: 0;
    -webkit-animation: 20s slidy ease-in-out infinite;
    animation: 20s slidy ease-in-out infinite;
}

'WEB > CSS' 카테고리의 다른 글

[CSS] 구글 웹폰트 사용하기  (0) 2017.11.27
[CSS] width에 padding과 margin을 포함시키기  (0) 2017.11.27
[CSS] 자간 설정  (0) 2017.11.27
[CSS] @font-face 사용하기  (0) 2017.11.27
[CSS] 위에서 아래로 그라데이션 주기  (0) 2017.11.27



테이블 작업을 했을때 상단은 위아래로 스크롤 할 때는 고정시키고 좌우로만 움직이게 하고 싶을 때가 있다.

HTML

//상단에 고정시킬 div
<div id="scroll_div_1"> 
    <table>
        ....
    </table>
</div>

//내용
<div id="scroll_div_2" onScroll="syncScroll()"> 
    <table>
        Contents
    </table>
</div>

JS

function syncScroll(){  
    var oFrame1, oFrame2;  
    oFrame1 = document.getElementById('scroll_div_1');  
    oFrame2 = document.getElementById('scroll_div_2');  
    oFrame1.scrollLeft = oFrame2.scrollLeft;  
}



'WEB > HTML' 카테고리의 다른 글

[HTML] <input> 태그의 type 속성  (0) 2017.11.27
[HTML] <span> 태그  (0) 2017.11.27
[HTML] <p>와 <br> 태그  (0) 2017.11.27
[HTML] <div> 태그  (0) 2017.11.27
[HTML] 오른쪽 클릭, 드래그, 선택 방지  (1) 2017.11.27



.nav{ 
    height: 100px;

    /* Old browsers */ 
    background: #3a9dce !important;

    /* FF3.6-15 */ 
    background: -moz-linear-gradient(top, #3a9dce 3%, #246585 100%) !important;

    /* Chrome10-25,Safari5.1-6 */ 
    background: -webkit-linear-gradient(top, #3a9dce 3%,#246585 100%) !important;

    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    background: linear-gradient(to bottom, #3a9dce 3%,#246585 100%) !important;

    /* IE6-9 */ 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a9dce', endColorstr='#246585',GradientType=0 ) !important;
}

'WEB > CSS' 카테고리의 다른 글

[CSS] 구글 웹폰트 사용하기  (0) 2017.11.27
[CSS] width에 padding과 margin을 포함시키기  (0) 2017.11.27
[CSS] 자간 설정  (0) 2017.11.27
[CSS] @font-face 사용하기  (0) 2017.11.27
[CSS] 슬라이드하기  (0) 2017.11.27



$contents = nl2br($contents);

nl2br 함수를 사용하면 엔터를 적용했던 \r\n이 자동으로 <br /> 태그로 치환되서 적용된다.

'PHP' 카테고리의 다른 글

[PHP] 특정 문자열이 있는지 없는지 체크  (0) 2017.12.04
[PHP] 문자와 숫자가 함께 있는 변수에서 숫자만 찾아내기  (0) 2017.12.01
[PHP] html 코드 그대로 출력  (0) 2017.11.27
[PHP] NaN 뜰때 해결방법  (0) 2017.11.27
[PHP] 모바일 접속 체크  (0) 2017.11.27

+ Recent posts

티스토리툴바