'분류 전체보기' 카테고리의 글 목록 (35 Page)

Tudo vai dar certo

다 잘 될거야

브라질인들이 많이 사용하는 말입니다.

Things will work out.

Everything's gonna be okay/alright.

다 잘 될거야.

'me myself and i > english' 카테고리의 다른 글

담당 부서를 가르쳐 주세요 (0)	2018.03.28
영어회화 100일의 기적 - 2일차 (2)	2018.03.27
영어회화 100일의 기적 - 1일차 (0)	2018.03.25
Just give up. 포기해! (0)	2018.01.08
figure out 해결하다, 알아내다 (0)	2018.01.06

gradient 속성 (그라데이션)

http://colorzilla.com/gradient-editor/

위 사이트에서 그라데이션 할 때 원하는 색 코드를 만들 수 있다.

아직까지 모든 웹 브라우저에서 css3의 모든 기능을 제공하지 못하기 때문에

모든 웹 브라우저에서 그라데이션을 제공하기 위해서 코드가 아래와 같이 짜여져서 나온다.

ex)

* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */

background: #1e5799; /* Old browsers */

background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

'programing > html5&css3' 카테고리의 다른 글

html 기초 강의 2 (0)	2018.01.29
html 기초 강의 1 (0)	2018.01.29
css3 기초 (0)	2018.01.08
css3 기초-문자선택자, 링크선택자, 부정선택자 (0)	2018.01.07
css3 기초 - 반응선택자, 상태선택자, 구조선택자 (0)	2018.01.07

1. 위시캣 (프리모아 보다 조금 더 사용자가 많고, 디자인 관련 외주도 있다.)

https://www.wishket.com

2. 프리모아 (웹 아웃소싱 전문)

http://www.freemoa.net

3. 크몽 (웹 전문은 아니고 전 분야에 걸쳐 아웃소싱 가능하다.)

https://kmong.com

'programing' 카테고리의 다른 글

sublimetext3 설치 및 한글 사용이 편리하도록 변경하기 (0)	2018.03.07
안드로이드 어플 디컴파일러 (0)	2018.02.25
리눅스 사용할 수 있는 사이트 (0)	2018.02.02
점프 투 파이썬 (0)	2018.02.01
엑셀 - 빈 칸 앞에 있는 문자만 추출하기 (0)	2018.01.26

That's no good. Just give up.

쓸데 없는 짓이야, 그냥 포기해.

Give it up.

포기해

The word "quit" isn’t in my vocabulary.

내 사전에 포기란 없다.

'me myself and i > english' 카테고리의 다른 글

담당 부서를 가르쳐 주세요 (0)	2018.03.28
영어회화 100일의 기적 - 2일차 (2)	2018.03.27
영어회화 100일의 기적 - 1일차 (0)	2018.03.25
다 잘 될거야 (0)	2018.01.09
figure out 해결하다, 알아내다 (0)	2018.01.06

주석

display 속성

화면에 어떻게 보이는지 설정한다.

(1)block

<div>. <p>, <li> 같이

블럭 쌓듯이 층층이 쌓는 것

(2)inline

<span> 같이

옆으로 붙여나가는 것

(3)inline-block

block의 속성 갖고 옆으로 붙여나간다.

옆으로 정렬 되면서 높이의 속성도 가짐.

(4)none

자리 포함 모든것이 화면에서 지워짐

visibility 속성

visibility:hidden

자리는 남고 화면에서만 지움

opacity 속성

투명도를 조절한다.

숫자가 작을수록 투명해진다.

opacity:0.7;

★margin과 padding 속성

margin:10px;

오리지널 사이즈는 그대로 있고 상하좌우 10px의 여백이 생김

padding:10px;

오리지널 사이즈에서 상하좌우 10px가 증가

margin:10px 5px;

상하 10, 좌우 5

margin:10px 5px 7px;

상 우 하 좌

왼쪽 값 없으므로 우측 값 재활용하여 7px 적용된다.

box-sizing속성

box-sizing:border-box;

오리지널 크기 안쪽으로 테두리 그려줌

테두리를 포함하여 크기 변화 없음

box-sizing:content-box;

오리지널 크기 바깥쪽으로 테두리 그려줌

테두리 때문에 크기 증가

border 속성

border:15px solid #색상;

실선

border-style: dashed;

점선

border-top:5px #색상;

위 테두리만 표시

border-radius:10px;

테두리 둥글게

background속성

(1)

background-image:50%;

이미지 1/4로 축소됨

(2)

background-repeat:no-repeat;

배경에 바둑판 배열을 안 하는 것

디폴트는 바둑판 배열이다.

(3)

background-attachment:fixed;

div의 사이즈 관계없이 브라우저 전체에 적용하는 것

div사이즈가 정해져 있다면 이미지는 짤린다.

font속성

font-family: '폰트이름', '폰트이름', '폰트이름';

첫번째 폰트로 하길 원하는데, 사용자가 폰트를 안 가지고 있으면 뒤에 폰트

그것도 없으면 그 뒤에 폰트, 다 없으면 디폴트 폰트로 보여진다.

font-style:italic;

italic normal;

글자 기울기

font-weight:bold;

600;

글자 굵게

line-height:50px;

행 간격(문장간 상하 간격)

line-height:(width값과 똑같은 값);

글자 세로 중앙 정렬됨

*text-align:center;

가로 중앙 정렬

position 속성

position: absolute;

절대값

좌상단에 붙어 나옴

position: absolute;

top:50px;

left:40px;

좌상단에서 띄어져서 나옴

position: fixed;

화면상에 브라우저에 따라가지 않고

스크롤로 욺직여도 위치 변화없음

position: static;

static이 디폴트 값이다

top, left 값 줘도 무의미 해진다.

position:relative;

top:100px; left 100px;

화면 좌상단에서부터 시작하지 않고

원래 있어야할 자리에서부터 시작

z-index:20;

z-index:10;

깊이 값 조정

숫자가 높을 수록 상단에 놓임

파워포인트의 위로 보내기 처럼

'programing > html5&css3' 카테고리의 다른 글

html 기초 강의 1 (0)	2018.01.29
css3 기초 - gradient 속성 (그라데이션) (0)	2018.01.09
css3 기초-문자선택자, 링크선택자, 부정선택자 (0)	2018.01.07
css3 기초 - 반응선택자, 상태선택자, 구조선택자 (0)	2018.01.07
css기초 - 선택자와 태그 (0)	2018.01.07

11.문자 선택자

특정 문자 또는 문자열을 선택하여 속성을 설정한다.

(1)첫 번째 글씨

#score::first-letter{

}

(2)첫 번째 라인

#score::first-line{

}

(3)드래그 했을 때의 설정

id="content"의 첫 번째 <p>만 선택하여 ::selection 속성 적용

ex)

#content p:first-child::selection{

background-color:yellow;

color:blue;

}

**********************************

margin:0 auto;

여백을 뜻하고

디폴트는 margin 0 0 0 0; 이다.

상하는 0 값

좌우는 자동으로 반 값씩 갖기 때문에 가운데 정렬이 된다

**********************************

border-bottom:1px;

테두리를 밑에만 준다

**********************************

<p>는 16px이 기본

**********************************

ex)

<!DOCTYPE html>

<html>

<head>

<style>

#wrap {

width:800px;

margin:0 auto;

}

#header {

border-bottom:1px solid #ff6a00;

}

#history2:first-letter, #history1::first-letter {

font-size:2em;

}

#history2:first-line, #history1::first-line {

font-weight:bold;

color:#4cff00

}

#footer ul {

overflow:hidden;

border:2px solid #ff6a00;

}

#footer ul li {

list-style:none;

float:left;

padding:20px;

width:100px;

height:100px;

}

</style>

</head>

<body>

</div>

어쩌구저쩌구 tatata

</p>

어쩌구저쩌구 blah blah

</p>

</div>

<ul>

</ul>

</div>

</body>

</html>

12.링크 선택자

href되어 있는 문자를 선택하여 속성을 설정한다.

첨부된 링크주소를 '-' 뒤에 적어준다.

#content a::after{

content: '-' attr(href);

}

13.부정 선택자

선택한 것을 제외한 나머지에 속성을 적용한다.

li 중 fa가 아닌 나머지에 적용된다.

li:not(.fa){

}

**********************************

padding: 30px 35px;

위아래 간격 / 글자간 간격

**********************************

'programing > html5&css3' 카테고리의 다른 글

css3 기초 - gradient 속성 (그라데이션) (0)	2018.01.09
css3 기초 (0)	2018.01.08
css3 기초 - 반응선택자, 상태선택자, 구조선택자 (0)	2018.01.07
css기초 - 선택자와 태그 (0)	2018.01.07
html5 기초-태그와 레이아웃 (0)	2018.01.07

8. 반응 선택자

마우스 반응에 따른 속성을 설정한다.

houver : 커서를 갖다댔을 때의 상태

ex)

ul {

foot=size : 30px

color:blue;

}

ul:houver{

color:red;

}

**********************************

margin:30px;

상하좌우 30픽셀 여백 줌

margin: 5 5 3 3;

상하좌우 개별적으로 여백 주기

margin:0 auto;

가운데 정렬

**********************************

font-size:3em;

글자 3배 커짐

**********************************

9. 상태 선택자

상태에 따라서 css속성이 변화하는 설정을 준다.

input:focus : 글자 입력할 때의 상태

enabled : 글자 입력 한 후의 상태

disabled : 변경 불가능

padding : input하는 곳을 마우스로 눌렀을 때 깜박이는 커서와 input칸 과의 간격

ex)

input:focus {

padding: 15px;

}

input:enabled {

color:#색상번호;

}

input:disabled{

font-weight:bold;

}

<body>

<form>

비밀번호 : <input type="password" name="upw" value="1004" disabled="disabled"/>

</form>

</body>

10. 구조 선택자

구조에 따라 변화하는 설정을 준다.

ex)

(1)

li:nth-child(2n*1){

}

홀수 선택

(2)

li:nth-child(2n){

}

짝수 선택

(3)

li:first-child li:last-child{

}

처음과 끝 선택

(4)

li:first-of-type{

}

처음 선택

(5)

li:first-of-type{

}

끝 선택

**********************************

list-style:none;

<ul>의 모양을 없앤다.

**********************************

border-radius:10 10 0 0;

테두리를 둥글게 만든다.

좌상단 우상단 우하단 좌상단 값

**********************************

<a> 태그 중 target="_blank"

(추가)

_blank : 새 창에 열기

_parent: 부모창에 열기

_self:자신의 창에 열기

_top:모든 프레임을 지우고 전체 화면에 열기

**********************************

왼쪽 정렬

float:left;

값 없으면 재활용한다. 30 0 30 0 이 순서대로 적용

border-radius:30px 0;

**********************************

ex)

<!DOCTYPE html>

<html>

<head>

<style>

#header, #content, #footer {

width:1000px;

margin:0 auto;

overflow:hidden;

}

#header .left_space, #content .left_space, #footer .left_space {

width:150px; height:150px;

float:left;

background-color:#808080;

border:1px solid #00ffff;

}

#header .center_space, #content .center_space, #footer .center_space {

width:694px; height:150px;

float:left;

background-color:#eaa4a4;

border:1px solid #000000;

}

#header .right_space, #content .right_space, #footer .right_space {

width:150px; height:150px;

float:right;

background-color:#ffd800;

border:1px solid #0094ff;

}

#header .left_space, #footer .right_space{

border-radius:30px 0;

}

#header .right_space, #footer .left_space{

border-radius:0 30px;

}

#content .left_space{

border-radius:0 30px 30px 0;

height:300px;

}

#content .right_space{

border-radius:30px 0 0 30px;

height:300px;

}

#header .center_space{

border-radius:0 0 30px 30px;

}

#content .center_space{

border-radius:30px;

height:300px;

}

#footer .center_space{

border-radius:30px 30px 0 0;

}

#content .center_space ul li{

list-style:none;

float:left;

padding:0 40px;

font-weight:bold;

font-size:20px;

}

#content .hiseoul{

clear:both;

padding:10px;

}

</style>

</head>

<body>

</div>

<div>

<ul>

<li>gallery</li>

<li>contact</li>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

'programing > html5&css3' 카테고리의 다른 글

css3 기초 - gradient 속성 (그라데이션) (0)	2018.01.09
css3 기초 (0)	2018.01.08
css3 기초-문자선택자, 링크선택자, 부정선택자 (0)	2018.01.07
css기초 - 선택자와 태그 (0)	2018.01.07
html5 기초-태그와 레이아웃 (0)	2018.01.07

<head>안에 적는다.

1. 선택자

특정 태그(html 구성요소)를 선택하여, 태그의 속성을 변경함

(1)배경색 넣기

div 선택자: 밑에 div태그를 선택함, 백그라운드 속성을 속성값(색상번호)로 변경시킴

ex)

<style>

div{

background-color:#색상번호; border:npx solid #색상번호; //테두리 5픽셀에 색상 추가

}

</style>

2. 태그 선택자

특정 태그를 선택하여 css 속성을 적용한다.

ex)

<style>

li{

color: #색상번호;

}

</style>

//리스트 속성만 변경하고 싶을 때

//font-weight:bold; 폰트 굵게

//<head> 제목 <body> 내용

//<body> 안에 <header><nav><section><footer> 존재

//태그선택자는 밑에 있는 내용으로 우선 적용됨

//{border: 1px dashed #색상번호;}

// 점선 생김!

3. *선택자

내용 전체 속성 변경

ex)

<style>

*{

color:#색상번호

}

</style>

//margin:0;

//pedding:0;

//위에 두개 적으면 문장 시작시점의 상하좌우간격 0이 됨?

//font-size:large; (small;도 있음)

//text-decoration:underline; 밑줄

4. id(#)와 class(.)

wrap이라는 이름값을 줄 수 있음

id값에 선택자로 사용 가능

#wrap{} 불러서 속성 변경

id와 내용은 같은데 이름만 class!

.menu1{} 로 부름

//text-align:center;

//중앙정렬

//width:500px;

//border 가로 500픽셀 값 가짐

//overflow:hidden;

//float 사용 전에 제일 상위 태그에 적용

//float: left;

//옆으로(왼쪽에) 붙어서 나오기, 레이아웃 잡을 때 사용

//clear:both;

//float속성 없애기!

//side_banner 이런식으로 이름 적기

//tag선택자와 함께 사용 가능

//ex) ul li.menu{}

5. 속성 선택자

ex)

type이 속성

tsxt가 속성값임

input[type=text] {

color:organge;

width:200px;

}

//input의 type속성 중 text 속성값들만 변경

//input이 textfield인가 봄

img[src]{border: 5px solid green;}

//이것도 가능

input {

color:green;

}

//이것도 가능, textfield값이 변경되는 것임

6. 자식/후손 선택자

자식: 딸, 아들

(바로! 내 밑에만 선택!)

후손: 딸, 아들, 손녀, 손자

(내 밑 모든 것 선택)

위에서 배운건 후손 선택자임

//자식태그, 자식선택자

div > h1 {

color:yellow;

}

//바로 밑에 있는 것만 선택됨

7. 동위 선택자(+, ~)

태그의 동등한 위치를 판단하여 css속성을 설정한다.

ex)

h3~div{

}

//h3하고 div가 동등한 위치에 있으면 다 선택

h3+div{

}

//h3하고 바로 밑에 있는 div하나만 선택!

**********************************

1) 상하 줄간격

line-height: 100px;

**********************************

2) 글자 간 간격

letter-spacing: 50px;

**********************************

'programing > html5&css3' 카테고리의 다른 글

css3 기초 - gradient 속성 (그라데이션) (0)	2018.01.09
css3 기초 (0)	2018.01.08
css3 기초-문자선택자, 링크선택자, 부정선택자 (0)	2018.01.07
css3 기초 - 반응선택자, 상태선택자, 구조선택자 (0)	2018.01.07
html5 기초-태그와 레이아웃 (0)	2018.01.07

html이란?

html은 태그작성(=글 작성)을 하는 것.

1. 태그 구성

<p> : 열린 태그

<p/> : 닫힌 태그

<태그이름 속성 속성값>으로 구성된다.

ex) <img src="v.jpg"/>

태그이름: img

속성: src

속성값: v.jpg

2. 태그

<h> : 제목

<h1>부터 <h6>까지 존재

<h1>이 가장 큰 글씨

<p> : 일반 글자

<b /> : 줄바꿈

<a> : 텍스트나 이미지에 링크 연결

ex) <p><a href="http://www.google.com" target="_blank">구글 홈페이지</a></p>

_blank : 기존 창은 그대로 있고, 새 창이 열림

_self : 기존 창에서 링크로 연결됨

<i> : 이태리체

<sup> : 위첨자

<ins> : 글자에 언더라인 긋기

<del> : 글자 중간에 라인 긋기

<hr /> : 가로선 긋기

3. 리스트 태그

(1)

<ul> unorder list type

<ol> order list

<li> list 아이템

ex)

<body>

<ul>

</ul>

</body>

(2)

<dl>

<dt> 메뉴 리스트

<dd> 리스트 목록

4. 테이블 태그

표를 만드는 것으로 회원가입, 로그인에 사용했었지만 요즘엔 사용빈도가 적다.

대신 div로 사용

tr : 행

tb : 열

border="1" : 테이블 테두리 두께값이 1이다

rowspan : 행 합치기

colspan="2" : 열 2개 합치기

=>첫번째 행과 열에 두고 사용, 첫번째 값부터 카운트한다.

ex)

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</table>

5. 이미지, 사운드, 비디오 태그

(1) 이미지

(2) 사운드

controls="controls" : 음악 재생하는 플레이어를 보여 줌(안 보여주려면 안 적으면 된다.)

autoplay-"autoplay" : 자동재생

loop="loop" : 무한 재생(default는 1번 재생)

(3) 비디오

type : 정보값

6. 폼 태그

회원가입, 이벤트 응모, 정보 입력할 때 사용

action : 회원가입 정보 입력 후, db 정보 쌓일 서버 쪽 주소 적기.

method : "get"(브라우저에 정보 노출, 보안에 취약, 주소가 뒤로 붙어서 서버로 이동)

"post"(문서 헤더에 정보가 암호하되서 서버로 감, 정보 은닉됨)

"text" : 일반 문자

"password" : 기호로 대체되서 표시된다

name : input의 유니크한 이름

size="5" : 문자입력가능 수

radio : n개 중 1개 선택 시, name값 "gender"로 같고, value가 달라야 한다.

get.gender하면 m값 혹은 w값 가져온다

checkbox : 한글, //n개 중 n개 선택 가능, 다중선택시 배열로 가져옴, checked는 디폴트값, name이 같아야 한다

option : 태그 아이템

multiple : select와 같은데 n개 선택 가능

submit : 누르면 경로를 찾아서 이동한다

ex)

name : <input type="text" name"unname" /><br />

id : <input type="text" name"uid" /><br />

pw : <input type="password" name"upw" /><br />

tel : <input type="text" name"unphone" size="5" /><br /> -

<input type="text" name="unphone2" size="5" /> -

<input type="text" name="unphone3" size="5" /> <br />\

사진 : <input type="file" name="upic"/><br />

성별구분: <input type="radio" name="gender" value="m">남,

사용언어: <input type="checkbox" name="lan" value="kor" checked="checked"/>

<input type="checkbox" name="lan" value="eng" /> 영어,

<input type="checkbox" name="lan" value="jap" /> 일어,

자기소개: <textarea rows="5" cols="20">간단하게 입력하세요.</textarea><br />

국적: <select> //업다운 선택지, n개 중 1개 선택 가능

<option>KOREA</option>

<option>JAPAN</option>

<option>CHINA</option>

</select><br />

좋아하는 음식: <select multiple="multiple">

</select><br />

</form>

7. 레이아웃 구성

<head> : 설정 관련 내용, meta태그, <title>, css설정

<body> : 정보 전달 내용

<header> : 홈페이지 이름, 회사 로고, 중요한 정보

<nav> : 메뉴

<section> : 정보

<footer> : 회사 정보

8. 레이아웃 태그

<div>: 블럭요소 (br태그 없이도 블럭 쌓듯이 정렬됨)

<span>: 라인요소 (한 칸 뛰고 옆으로 쭉쭉 정렬됨)

section : 영역 구분을 위한 용도

article : 실제 콘텐츠, 내용을 표현할 때 사용

address : 이메일 주소, 연락처 정보, 이텔릭 체로 표시됨

*우편물 주소는 p태그 사용

'programing > html5&css3' 카테고리의 다른 글

css3 기초 - gradient 속성 (그라데이션) (0)	2018.01.09
css3 기초 (0)	2018.01.08
css3 기초-문자선택자, 링크선택자, 부정선택자 (0)	2018.01.07
css3 기초 - 반응선택자, 상태선택자, 구조선택자 (0)	2018.01.07
css기초 - 선택자와 태그 (0)	2018.01.07