html float로 중앙정렬 시키기

HTML 2016. 4. 25. 17:17

http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=74325&sca=%BA%EA%B6%F3%BF%EC%C0%FA



http://codepen.io/alexandredees/pen/ojaFr

'HTML' 카테고리의 다른 글

css * 의미  (0) 2016.04.26
css :before :after  (0) 2016.04.26
밑줄 hover 인라인스타일로  (1) 2016.04.08
<pre>태그  (0) 2015.12.07
jquery로 css 접근해서 처리  (0) 2015.11.16
Posted by 이상욱1
,

밑줄 hover 인라인스타일로

HTML 2016. 4. 8. 14:45

http://www.sitepoint.com/forums/showthread.php?311387-Inline-a-hover-tag

<a href="##" onmouseover="this.style.color='#66ccff';" onmouseout="this.style.color='#ff0000';"
style=" text-decoration: none; font-weight: bold; font-size: 5.9em ;color:#ff0000;">12345</a>


밑줄에 컬러를 css  생성 이용

<style>


.underline

{

    color: #568cd0;

}


</style>

'HTML' 카테고리의 다른 글

css :before :after  (0) 2016.04.26
html float로 중앙정렬 시키기  (0) 2016.04.25
<pre>태그  (0) 2015.12.07
jquery로 css 접근해서 처리  (0) 2015.11.16
css 우선순위 !important  (0) 2015.09.18
Posted by 이상욱1
,

<pre>태그

HTML 2015. 12. 7. 15:37
◈ 입력한대로 보여주는 <pre> 태그 ◈

기본적으로 html 문서에서 <pre>태그는 "Line Break"를 의미하며, 강제적으로 줄바꿈을 할 때 사용합니다. 키보드의 엔터(Enter), 탭(Tab), 사이띄기(Space) 등을 무조건 공백 하나로만 취급합니다. 그러나 <pre> 태그안의 문자열드에 대해서는 원하는 곳에 지정한 문장을 배치할 수 있으며 원하는 만큼 공백을 줄수도 있고 복잡한 문장과 단락구조 자체를 쉽게 효현할 수 있습니다. <pre>태그를 사용할 때 주의점은 다른 태그를 안에 사용하지 말아야 한다는 것입니다.



◈ 사용예 ◈


<html>
<head>
<title>pre 태그</title>
</head>
<body>
<pre>
입력한대로     나타납니다
나보기가 역겨워 가실때에는
말없이 고이보내 드리오리다.


가시는 걸음 걸음 놓인 그꽃을 

사뿐히 즈려밟고 가시옵소서.

</pre>
</body>
</html>



◈ 실행결과 ◈



입력한대로     나타납니다
나보기가 역겨워 가실때에는
말없이 고이보내 드리오리다.


가시는 걸음 걸음 놓인 그꽃을 

사뿐히 즈려밟고 가시옵소서.


'HTML' 카테고리의 다른 글

html float로 중앙정렬 시키기  (0) 2016.04.25
밑줄 hover 인라인스타일로  (1) 2016.04.08
jquery로 css 접근해서 처리  (0) 2015.11.16
css 우선순위 !important  (0) 2015.09.18
img 태그에 alt 속성  (0) 2015.09.16
Posted by 이상욱1
,

jquery로 css 접근해서 처리

HTML 2015. 11. 16. 14:47


http://sevenerror.tistory.com/5


  CSS 속성값 확인

  $("변경하려는 대상").css("속성");


  CSS 속성값 변경

  $("변경하려는 대상").css("속성","속성값"); 

 $('.mLoading').css("display")  

클래스 mLoading 의 display 속성 값을  보는 코드

 결과값은 none 

 $('.mLoading').css("display" ,'block');

클래스 mLoading 의 display 속성 값을  block 으로 주는 코드 


'HTML' 카테고리의 다른 글

밑줄 hover 인라인스타일로  (1) 2016.04.08
<pre>태그  (0) 2015.12.07
css 우선순위 !important  (0) 2015.09.18
img 태그에 alt 속성  (0) 2015.09.16
css active 속성 메뉴바 탭키  (0) 2015.09.11
Posted by 이상욱1
,

css 우선순위 !important

HTML 2015. 9. 18. 16:23

3. 선택자(Selector) 우선순위

스타일 시트는 다음과 같은 3개의 CSS원천 소스(Original Source)를 가질 수 있습니다.

  • 제작자(author) 원천 소스 : 웹 사이트 제작자가 지정하는 자신의 페이지 스타일
  • 사용자(user) 원천 소스 : 사용자가 직접 정하는 자신이 사용할 스타일
  • 사용자 도구(user agent) 원천 소스 : 웹 브라우저 자체에 지정된 기본 스타일

스타일을 적용하는데는 다양한 방법이 있으며 동시에 여러가지 방법을 사용하게 되면 스타일이 충돌할 수 있습니다. 그렇기 때문에 각 원천 소스간은 물론, 선택자 간의 우선순위를 알아야 합니다. 다음의 우선순위 규칙을 통해 원하는 스타일을 정확히 적용할 수 있습니다.

 

1) 원천 소스 우선 순위

!important 선언을 한 사용자 스타일  > !important 선언을 한 제작자 스타일 > 제작자 스타일 > 사용자 스타일 > 사용자 도구 선언 (브라우저 자체의 선언)

 

2) CSS 명시도(Specificity) 계산법 

 !important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]

!important선언을 사용한 형식이 가장 우선 순위가 높습니다. 그래서 다른 선언들을 덮어버릴 수 있기 때문에 꼭 필요한 곳에만 사용해야 합니다.

이를 제외한 나머지 선택자는 대괄호 “[]”안에 있는 숫자를 각각의 점수로 부여하여 우선순위를 계산합니다.

  • ID 선택자의 갯수를 세어서 개당 100 으로 계산합니다. (= a)
  • 클래스 선택자의 갯수를 세어서 개당 10 으로 계산합니다. (= b)
  • 태그 선택자의 갯수를 세어서 개당 1 로 계산합니다. (= c)
  • 공용 선택자는 모두 0으로 계산합니다. (= d)
  • 가상 엘리먼트는 무시합니다.

→ a + b + c + d의 값이 높은 순서대로 스타일을 적용하는 우선순위를 가지게 됩니다. 다음의 예를 봅시다.


http://www.nextree.co.kr/p8468/

'HTML' 카테고리의 다른 글

<pre>태그  (0) 2015.12.07
jquery로 css 접근해서 처리  (0) 2015.11.16
img 태그에 alt 속성  (0) 2015.09.16
css active 속성 메뉴바 탭키  (0) 2015.09.11
css 박스 모델  (0) 2015.09.06
Posted by 이상욱1
,

img 태그에 alt 속성

HTML 2015. 9. 16. 13:18


alt 속성은 img 태그 안에서만 쓰입니다. 즉 JPG/GIF 등의 그림에 관련된 속성(Attribute)입니다. 그림이 서버에서 지워졌거나, 또는 인터넷 종량제 등으로 인해 그림을 일부러 표시하지 않도록 브라우저를 설정한 경우 등, 그림을 표현할 수 없는 경우가 있습니다. 이때는 그림이 있어야 할 자리를 텅 비워 두는 것보다는 글자들을 대신 채워 넣는 것이 좋습니다. 바로 alt 속성 안에 들어 있는 글자들이 그림 대신으로 (Text Alternative) 출력되는 것입니다.


이것이 alt 속성의 사용법입니다:

<img src="그림 주소" alt="그림이 없을 때 나올 설명" />



http://mwultong.blogspot.com/2006/05/html-title-img-alt.html

'HTML' 카테고리의 다른 글

jquery로 css 접근해서 처리  (0) 2015.11.16
css 우선순위 !important  (0) 2015.09.18
css active 속성 메뉴바 탭키  (0) 2015.09.11
css 박스 모델  (0) 2015.09.06
컨테이너 안에서 자유롭게 위치 잡기  (0) 2015.09.06
Posted by 이상욱1
,

css active 속성 메뉴바 탭키

HTML 2015. 9. 11. 15:56







아래 같이 해당 탭에 눌린 표시를 줄수 있다 해당  연결된 에서 htm 에서 속성을  이렇게 주면된다 <li class='innerdev active'>

전체 페이지의 html에서는 <li class="alldev active"> 이렇게 표시 











1. <A> 태그의 종류

 

A:link

방문한 적이 없는 링크의 기본 모양

즉, 한 번도 클릭한 적이 없는 상태의 링크 모양

 

A:visited

방문한 적이 있는 링크의 모양

 

A:active

링크를 클릭 했을 때의 모양

즉, 마우스로 클릭한 상태로 마우스 버튼을 떼지 않았을 때의 누르고 있는 상태의 모양

 

A:hover

링크에 마우스 커서를 올렸을 때의 모양

마우스 오버 효과라고 부릅니다.

 

 

2. 사용 방법

 

A:link    { text-decoration:underline; color:#333333; }

A:visited    { text-decoration:underline; color:#333333; }

A:active    { text-decoration:underline; color:#333333; }

A:hover    { text-decoration:underline; color:#333333; }

 

text-decoration

링크의 줄 속성을 설정합니다.

underline은 밑줄, overline은 윗줄, none은 줄 없음, 이렇게 세 가지 속성이 존재합니다.

 

color

링크의 색상을 설정합니다.

http://gskool.tistory.com/111


'HTML' 카테고리의 다른 글

css 우선순위 !important  (0) 2015.09.18
img 태그에 alt 속성  (0) 2015.09.16
css 박스 모델  (0) 2015.09.06
컨테이너 안에서 자유롭게 위치 잡기  (0) 2015.09.06
css 레이아웃 position  (0) 2015.09.06
Posted by 이상욱1
,

css 박스 모델

HTML 2015. 9. 6. 17:19

  top 

margin

border 

padding 

content 


하나의 엘리먼트는 하나의 box(상자) 로 공간이 구성됩니다 

콘텐츠 - 엘리먼트 상이에 있는 텍스트나 이미자 표시됩니다. 

주의 할점은 모든 엘리먼트는 width 와 height 속성을 가지는데  이속성을 통해서 설정한 너비와 높이 값은 컨텐츠의 영역만 해당됩니다.


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title> 시작</title>

<style type ="text/css">

*{

margin:0px;

padding:0px;

}


#content{

  position:relative;

width:300px;

text-align:center;

padding-top:1em;

padding-bottom:1em;

border:2px solid red;

margin:.5em;

}



.title1{

font-size:14px;

font-weight:bold;

}


#logo{

margin-right:auto;

margin-left:auto;

}



</style>

</head>


<body>

<div id="content">

    <p class="title1"> 무엇이 당신의 차별화 전략인가요?</p>

    <img id="logo" src="../../Users/Administrator/Downloads/saddfs.gif" />

  

    </div>


</body>

</html>



'HTML' 카테고리의 다른 글

img 태그에 alt 속성  (0) 2015.09.16
css active 속성 메뉴바 탭키  (0) 2015.09.11
컨테이너 안에서 자유롭게 위치 잡기  (0) 2015.09.06
css 레이아웃 position  (0) 2015.09.06
css 선택자  (0) 2015.09.06
Posted by 이상욱1
,

컨테이너 안에서 자유롭게 위치 잡기

HTML 2015. 9. 6. 15:05

 html 의 트리구조에서 아버지 관계의 엘리먼트는 자식들을 담고 있기 때문에 컨테이너 역할을 합니다 .

예로

<div>

<p></p>

<img src=""/>

</div>


div 엘리먼트는  p와 img를 담고있는 컨테이너 이다 

컨테이너를 이동하면 그안에 엘리먼트들도 이동전 콘테이너에서 있던 위치와 같은 위치를 유지하면서 같이 이동한다 

 해당 pic1을 붙잡아서 pic 2로 옴길수도있다 해당 엘리먼트가 absolute로 설정되있다면  이동 시킬수 있다 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title> 시작</title>

<style type ="text/css">

*{

margin:0px;

padding:0px;

}


#container{

  position:relative;

height:460px;

width:300px;

border:3px solid red;

}


#pic1{

position:absolute;

left:38px;

top:13px;

}


#pic2

{

background-image:url(ball.png);

background-repeat:no-repeat;

position:absolute;

height:181px;

width:156px;

left:83px;

top:169px;

}


p{

position:absolute;

font-family:"Times New Roman" , Times ,serif;

font-size:16px;

font-style:italic;

}


#title1{

left:61px;

top:133px;

}


#title2{

left:37px;

top:82px;

}


</style>

</head>


<body>

<div id="container">

    <img id="pic1" src="../../Users/Administrator/Downloads/saddfs.gif"  alt=""/>

<p id="title1"> presentation</p>

          <div id="pic2">

<p id="title2"> presentation</p>

                </div>

    </div>


</body>

</html>




'HTML' 카테고리의 다른 글

css active 속성 메뉴바 탭키  (0) 2015.09.11
css 박스 모델  (0) 2015.09.06
css 레이아웃 position  (0) 2015.09.06
css 선택자  (0) 2015.09.06
css 인라인 스타일 ,내부 스타일 , 외부 스타일  (0) 2015.09.06
Posted by 이상욱1
,

css 레이아웃 position

HTML 2015. 9. 6. 14:33

position 은 엘리먼트가 브라우저의 페이지 안에 표시되는 방법 지정 

위치를 표시되는 방법 2가지 

1. absolute 

2.relative 

1.ex) p{ position:absolute;} - p 엘리먼트가 화면에 표시될때 절대좌표계로 표시됨 

브라우저의 왼쪽상단이 기준점(0, 0) 이 되어 오른쪽 하단의 지정된 좌표로 (x, y) 로 이동하여 표시됨 


2.  relative (상태좌표)  이렇게 지정을 하면 현재 자기 위치에 지정된 상대값만큼 이동시킵니다 

중요한것은 원래 엘리먼트가 표시될 위치가 기준점이라는 것입니다.


'HTML' 카테고리의 다른 글

css 박스 모델  (0) 2015.09.06
컨테이너 안에서 자유롭게 위치 잡기  (0) 2015.09.06
css 선택자  (0) 2015.09.06
css 인라인 스타일 ,내부 스타일 , 외부 스타일  (0) 2015.09.06
h1 h2 h3 태그의 의미 목표  (0) 2015.09.06
Posted by 이상욱1
,

티스토리툴바