미나미 블로그

[html]p 태그 , br 태그 줄과 관련된 태그

[HTML] 2017. 5. 3. 03:43

p 태그 | br 태그

줄과 관련한 태그를 오늘은 알아볼까합니다.

<P> 태그 :한 단락을 만들어주는 태그

<p>태그를 없이 애국가 4절과 <p>태그를 있는 애국가 4절

<p>태그를 처리할 경우 1.2.3.4로 나누어지게 보여줄 수 있으면

우리가 문학 시간에 배운 단락에 구조처럼 줄칸이 생기게 됩니다.

또한, <p>태그 또한, CSS를 통한 줄칸의 사이도 변화시킬 수 있습니다.

실험적으로 <P> 태그를 동일하게 두번 적용했을 때,

마치 하나를 적용한 것처럼 보여지게 됩니다.

물론 3절 부분에서 안에다가 적용하면 안에서 단락이 더 생깁니다.

<br> 태그 :줄을 바꿔주는 태그

XHTML과 HTML에서 약간씩 다릅니다.

하지만, 여기선 HTML에 방법 아시면 됩니다.

XHTML : <br/> | HTML : <br>

html 은 규칙이 느슨하여 태그를 안닫거나 태그를 닫는 순서가 바뀌어도 문제되지 않지만
xhtml 은 규칙이 엄격하여 태그를 꼭닫아주어야 하고 태그를 닫는 순서도 엄격하게 적용됩니다.

1-2 사이에 <br> 태그를 1 사용시 줄이 생기고,

2-3 사이에 <br> 태그를 2 사용시 2줄이 생기고, (마치 P태그 처럼 보여집니다.)

3-4 사이에 <br> 태그를 # 사용시 3줄이 생깁니다.

<br>태그는 사용할 수록 줄칸이 추가되는 것처럼 보입니다.

(@ <br>태그 경우 코드에 가독성이 떨어짐으로 되도록 사용을 자제하는게 좋다고 하네요)

미나미나미

,

[python] 파이썬(python) 환경변수 추가 및 모를 때

[Python] 2017. 1. 9. 22:35

파이썬(python) 환경변수 추가 및 모를 때

파이썬을 설치를 하였으나, 파이썬 환경변수를 추가하지 못할 때...

막, 설치하고보니 설치 위치를 모를 때 나를 따라하시라.

1. 모든 앱에서 python 설치 링크의 위치를 엽니다.

2. 링크 위치에서 파일에 원래에 위치를 엽니다. (파일 위치 열기 클릭)

3. 그리고 위에 부분의 파일의 위치 드래그 또는 복사를 합니다.(위에 부분 주소)

4. 시스템 속성 - 환경변수 - 시스템 변수에 Path에 3번을 추가합니다.

예를 들어, \test3423로 끝이나면, ";"으로 닫고 뒤에 추가합니다.

4. 명령프롬포트(cmd)에서 python을 입력하면 됩니다.

미나미나미

,

웹브라우저(Web browser)들의 점유율

카테고리 없음 2017. 1. 4. 10:51

웹브라우저(Web browser)들의 점유율

Source: StatCounter Global Stats - Browser Market Share

지도로 본 웹브라우저(Web browser)들의 점유율

Source: StatCounter Global Stats - Browser Market Share

위의 차트는 http://gs.statcounter.com/ 에서 가져온 참고 자료입니다.

MS의 야심작 '옛지 - 프로젝트 스파르탄 '는 아무리해도 올라오지를 못하네요..

IE의 경우 버전 업데이트시에 과도하게 엔진을 추가하다보니 웹브라우저가 매우 무거워져서 사람들이 크롬 파이어폭스 등으로 이동하였는데 그래서 엣지를 출시하였건만 업데이트시마다 조금씩 오류를 잡고있지만 잘안쓰게 되네요...

미나미나미

,

[css] @media query(미디어 쿼리)와 screen 크기

[CSS] 2017. 1. 2. 21:40

@media query(미디어 쿼리)와 screen(화면) 크기

우리는 인터넷을 하나의 화면에서만 사용하지 않는다. 여러 화면에서 정보를 예를 들어 아래의 세 가지의 화면을 보자. 화면의 크기에 따라 네모 안에 있는 부분의 변화가 있다. 아마 티스토리를 반응형을 사용하시는 분들이라면 이 기능이 비슷하게 가지고 계실 것입니다.

1. 일반적 모니터 화면

2. (예를 들어) 태블릿 화면

2. 모바일 화면

뭐... 여기서 더 들어가볼까요?

우리가 잘 알고 있는 다음과 네이버는 각각 모바일용(m.daum.net, m.naver.com)과 일반(naver.com ,daum.net)이 각각 URL을 통해서 redirect를 통해 유지하고 있지만, 비용과 모바일용을 재구축한다는 점에서 시간이 들어간다는 점을 해결하기 위해서 스크린의 크기에 따른 대응을 통한 반응형을 구축한다는 점의 경제적인 면에서 대단히 효율적이다.

그래서 화면의 크기에 따른 기초적인 것을 설명하고자 합니다.

(설명글 쓰끼 너무 힘들어요…. 내용은 많이 빈약한 거 많이 알아요…. ㅠㅠ)

그리고 들어가기전에 IE8(익스플로어 8 이하 부터는 @media query 적용되지 않습니다.

IE8 이하에서는 추가적으로 script를 추가하여서 어느 정도 @media 쿼리를 사용할 수 있습니다.

1. https://code.google.com/archive/p/css3-mediaqueries-js/ 를 통해서 css3-mediaqueries.js 직접 추가

<script src="js/css3-mediaqueries.js"></script>

2. src를 통한 연결을 css3-mediaqueries.js과 연결

이렇게 추가하시면 IE6, IE5에서 어느 정도 작동한다고 하네요.

아래에 소스코드를 통해서 가로의 화면 크기 변화에 따른 배경화면을 봐꿔 보겠습니다.

(그리고, 전체 소스 코드에서 body 부분 주석을 해제 후 사용해주세요.)

그리고, JS 파일은 화면의 크기를 알아낼 수 있는 코드입니다.

<!DOCTYPE html>

<head>
<style>
body {
    background-color: lightblue;
    text-align:center;
}

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
@media screen and (min-width: 800px) {
    body {
        background-color: yellow;
    }
}
</style>
 <script type="text/javascript">
	function getDisplayInfo() {
		var size = {
		 width: window.innerWidth || document.body.clientWidth,
		 height: window.innerHeight || document.body.clientHeight
		}
		var w = document.getElementById("dispWidth");
		var h = document.getElementById("dispHeight");
        if(w != document.getElementById("dispWidth"))
			w.innerHTML = size.width;		
        w.innerHTML = size.width;
		h.innerHTML = size.height;

}
	window.onload = getDisplayInfo;
  </script>
</head>
<!--body onresize="getDisplayInfo()" text-align:center--!>
<h1>화면의 가로를 움직여보세요</h1>
  <div><b>w: <span id="dispWidth">widht</span>px / h: <span id="dispHeight">height</span>px</b></div>
<p>가로의 넓이에 따라 바탕화면 배경색이 달라집니다.</p>
<!--/body--!>

See the Pen @media - onresize by Nami (@NamuNami) on CodePen.

'[CSS]' 카테고리의 다른 글

[css] 바운스(Bounce ) 효과 만들기 (0)	2019.04.30
크롬 자동재생 방어,막기 없애버리기 ( + 보너스 유튜브(youtube) api 사용기) (0)	2018.05.03
[css] font-family 속성 (0)	2016.12.29
[css] :before :after (0)	2016.12.28

미나미나미

,

[css] font-family 속성

[CSS] 2016. 12. 29. 16:54

font-family : 글꼴 집합?

글꼴들의 우선 순위가 지정하여 font 없을 경우 차선택을 할 수 있도록 유도하는 것.

font-family는 family-name과 generic family로 나누어집니다.

family-name

지정한 폰트가 컴퓨터 시스템에 없을 경우에 시스템이 적절한 폰트를 선택할 수 있도록 대비

serif(삐침이 있는 명조계), sans-serif(삐침이 없는 고딕계 폰트), monospace(고정폭을 가진 폰트), fantasy(꾸밈계 폰트), cursive(필기체 폰트)로 다섯 종류

generic -family

font-family에서 우선 순위 높은 글꼴 중 없을 경우 generic family를 선언하면 유사 계열 적절한 폰트로 대체 된다. 예를 font-family : 고딕, sans-serif로 선언한 경우 고딕 없는 경우 sans-serif의 유사 계열 폰트로 적절하게 바꾸어 준다.

■ 구글 무료 폰트 : https://fonts.google.com/

그러면 구글 폰트 요소를 추가하는 방법을 알아보겠습니다.

1. https://fonts.google.com/earlyaccess에서 원하는 폰트를 찾아주세요

2. 원하는 폰트 url를 알아주시고 <head> </head>에 이렇게 추가해주세요

(link 하나당 = 1 font)

3. css에서 지정 또는 <head> </head> 부분에 추가해주세요

4. 확인해보겠습니다.

See the Pen Font-family by Nami (@NamuNami) on CodePen.

'[CSS]' 카테고리의 다른 글

[css] 바운스(Bounce ) 효과 만들기 (0)	2019.04.30
크롬 자동재생 방어,막기 없애버리기 ( + 보너스 유튜브(youtube) api 사용기) (0)	2018.05.03
[css] @media query(미디어 쿼리)와 screen 크기 (0)	2017.01.02
[css] :before :after (0)	2016.12.28

미나미나미

,

[css] :before :after

[CSS] 2016. 12. 28. 23:58

가상 클래스 :before | :after

:before (익스플로러 8, CS2) | ::before(익스플로러 9 이상,CS3)

다른 선택자의 뒤에 함께 쓰여 원하는 텍스트 및 스타일 넣거나 지정할 때 사용

See the Pen yVdmMv by Nami (@NamuNami) on CodePen.

:after (익스플로러 8, CS2) | ::before(익스플로러 9 이상,CS3)

뒤에 추가하는 것이 차이점

See the Pen JbQgZg by Nami (@NamuNami) on CodePen.

'[CSS]' 카테고리의 다른 글

[css] 바운스(Bounce ) 효과 만들기 (0)	2019.04.30
크롬 자동재생 방어,막기 없애버리기 ( + 보너스 유튜브(youtube) api 사용기) (0)	2018.05.03
[css] @media query(미디어 쿼리)와 screen 크기 (0)	2017.01.02
[css] font-family 속성 (0)	2016.12.29

미나미나미

,

'전체 글'에 해당되는 글 214건

[html]p 태그 , br 태그 줄과 관련된 태그

[python] 파이썬(python) 환경변수 추가 및 모를 때

웹브라우저(Web browser)들의 점유율

[css] @media query(미디어 쿼리)와 screen 크기

'[CSS]' 카테고리의 다른 글

[css] font-family 속성

'[CSS]' 카테고리의 다른 글

[css] :before :after

'[CSS]' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

미나미나미

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30