기타 지식

CSS 자주쓰는 기초 명령어

출처- 익방(https://www.icbbang.net/knowledge/3840)

 

1. border: 1px solid #OOO;

상자모양 테두리를 1픽셀만큼 #OOO색으로 출력합니다.

1-1. border-top : 1px solid #OOO;

해당요소의 테두리의 윗부분에 1픽셀만큼 #OOO색을 출력합니다.

1-2. border-bottom : 1px solid #OOO;

해당요소의 테두리의 아랫부분에 1픽셀만큼 #OOO색을 출력합니다.

1-3. border-left : 1px solid #OOO;

해당요소의 테두리의 왼쪽부분에 1픽셀만큼 #OOO색을 출력합니다.

1-4. border-right : 1px solid #OOO;

해당요소의 테두리의 오른쪽부분에 1픽셀만큼 #OOO색을 출력합니다.

 

2. border-radious: 1px;

해당 요소의 테두리를 1픽셀만큼 굴곡지게합니다.

요소들은 별다른 선언이 없을 경우 상자모양으로 표시됩니다.

이 명령어를 통해 굴곡을 표현할 수 있습니다.

 

3. padding: 1px;

해당요소안에 1픽셀의 여백을 집어넣습니다.

쉽게 말해 테두리안에 여백을 불어넣습니다.

3-1. padding-top: 1px;

해당요소안의 위쪽에 1픽셀의 여백을 집어넣습니다.

3-2. padding-bottom: 1px;

해당요소안의 아랫쪽에 1픽셀의 여백을 집어넣습니다.

3-3. padding-left: 1px;

해당요소안의 왼쪽에 1픽셀의 여백을 집어넣습니다.

3-4. padding-right: 1px;

해당요소안의 오른쪽에 1픽셀의 여백을 집어넣습니다.

 

4. margin: 1px;

해당요소의 바깥에 1픽셀의 여백을 집어넣습니다.

쉽게 말해 테두리바깥에 여백을 불어넣습니다.

4-1. margin-top: 1px;

해당요소의 바깥의 윗쪽에 1픽셀의 여백을 집어넣습니다.

4-2. margin-bottom: 1px;

해당요소의 바깥의 아랫쪽에 1픽셀의 여백을 집어넣습니다.

4-3. margin-left: 1px;

해당요소의 바깥의 왼쪽에 1픽셀의 여백을 집어넣습니다.

4-4. margin-right: 1px;

해당요소의 바깥의 오른쪽에 1픽셀의 여백을 집어넣습니다.

 

5. !important

해당 명령어가 선언될 경우 이 요소의 출력이 최우선순위가 됩니다.

 

6. background-color: #OOO;

해당 요소의 배경색을 결정합니다.

 

7. color: #OOO;

해당요소안에 쓰여지는 글자색을 #OOO로 출력합니다.

 

8. font-size: 12px

해당요소안의 글자크기를 12픽셀로 출력합니다.

 

9. font-weight: nomal;

해당요소안의 글자를 일반적인 두께로 출력합니다.

9-1. font-weight: bold;

해당요소안의 글자를 두껍게 출력합니다.

 

10. text-align: OOO;

해당요소안의 정렬을 결정합니다.

10-1. text-align: left;

해당요소안의 정렬을 왼쪽으로 결정합니다.

10-2. text-align: right;

해당요소안의 정렬을 오른쪽으로 결정합니다.

10-3. text-align: center;

해당요소안의 정렬을 가운데로로 결정합니다.

10-4. text-align: justify;

해당요소안의 정렬을 양쪽으로 결정합니다.

10-5. text-align: initial;

해당요소안의 정렬을 기본값으로 결정합니다.

10-6. text-align: inherit;

해당요소안의 정렬을 부모 요소의 속성값으로 결정합니다.

 

 

11. position: static;

해당요소의 출력방식을 기본값으로 결정합니다.

11-1. position: relative;

해당요소의 출력방식을 다른 명령어값에의해 결정할 수 있습니다.

별다른 명령어가 없을 시 기본값으로 결정됩니다.

11-2. position :fixed;

해당요소의 출력방식을 고정합니다.

이는 스크롤을 내려도 해당요소가 같은 위치에서 출력됨을 의미합니다.

11-3. position: absolute;

해당요소의 출력방식을 부모요소값으로 결정합니다.

position:static;값을 가지지 않는 요소와의 상관관계에 의해 출력됩니다.

 

12. width: 100px;

해당요소의 길이를 100픽셀로 결정합니다.

 

13. height: 100px;

해당요소의 높이를 100픽셀로 결정합니다.

 

14. float: OOO;

해당요소또는 해당요소의 이미지의 출력위치(글자와의 상관관계)를 결정합니다.

14-1. float: left;

왼쪽으로 출력합니다.

14-2. float: right;

오른쪽으로 출력합니다.

14-3. float: inherit;

부모요소를 물려받습니다.

14-4. float: none;

해당요소를 부유시키지 않습니다.

37개의 댓글

2019.02.07

flex 공부해라

0
2019.02.07
@monoless

flex 하는데 돈을 다 썼어??

0
2019.02.07
@랜덤개드립

http://ko.learnlayout.com/flexbox.html

0
2019.02.08
@랜덤개드립

명품이 나의 가치를 매겨

0
2019.02.08
@monoless

호환성 개구리지않냐 ie나 오페라, 사파리는 flex 안될텐데 그래서 안쓰는거고..

0
2019.02.08
@재잘재잘

flex 시간 지나면 꼭 쓰긴 할 것 같은데 지금은 브라우저, 버전 문제 때문에 좀 꺼려진다. 브라우저 구버전 쓰는 사람 싫다.

0
2019.02.08
@키보드

아무래도 그룹웨어가 ie구버젼 요구하는게 많아서 그런듯

0
@재잘재잘

지금 flex 제대로 지원 안하는거 안되는거 IE밖에 없고.. 2019년이다..

0
2019.02.08
@기동전사김기동

아니 구버전 브라우저에서 지원을 안하니까 그렇지 동시에 구버전 브라우저 쓰는사람 많으니 문제인거고. 다들 브라우저 업데이트 딱딱 알아서 하면 개발자가 이런 걱정을 왜 하겠냐 ㅋ 걍 최신 api 무조건 쓰면 되는데 얼마나 좋아

0
2019.02.08
@monoless

Flex 질투와~씨쌤 받으면써 우리 멀써지자~

에 내 요글하는 전국아디 다쓰점장

매장에 나타나썬 모든오시 공 짜

해시 스완 처럼 쌀 빼고 여자 싸이즈

핫 핑크 입고 블랙 핑크 빽댄ㅛㅓ

0
2019.02.08
@monoless

계약할때 IE 미지원, IE호환 요청시 50% 프로젝트비 가산합니다. IE9이하요청시 50% 추가 가산

 

그리고 flex 사파리 잘됨 .누가 안된데? 

0
2019.02.08

명...령어? 그리고 요새 flexbox 안쓰는 퍼블리셔 없다

0
2019.02.08
@치다

진짜? 구버전 브라우저에서 지원 안하는데 씀?

0
2019.02.08
@재잘재잘

polyfill

0
2019.02.08
@치다

와 css를 polyfill로 한다고? 대고객용으로 IE11 맞출거 생각하니까 암담하다

삼성브라우저 카카오톡인앱 네이버인앱도 되려나 흠

0
2019.02.08

css버리고 sass로 갈아탄지 오래임

0
2019.02.08
@미친레후

나눈 stylus

0

웹디쪽은 잘 모르는데 이걸 다 일일히 쳐서 입력해? 옛날에 나모웹에디터 같은거 없어? 그냥 마우스로 쭉쭉 하는거...

0
2019.02.08
@진짜냐사실이냐리얼이냐

있는데 제대로 배워서 처음부터 다 만드는 목수작품이랑 이케아 조립가구 수준으로 차이남. 조립가구 가성비 좋자너? 거기에 만족하믄 ㅎㅎ

0
2019.02.08

생초보가 vuetify같은 프레임워크부터 쓰려했는데, 이 글보고 css강좌 구매했다

0
2019.02.11
@헤드셋을끼고

사이트좀 알려주라

0
2019.02.11
@Y0UDU

udemy.com 에서 구입했어

0
2019.02.11
@헤드셋을끼고

오 감사감사 들어본 후기는 어때? 추천해줄만해?

0
2019.02.11
@Y0UDU

강사에 따라서 차이가 많이 나더라. 리액트 관심있으면 Stephen Grider 추천해. 다른 유명한 udemy 강사들에 비해서 얘가 진짜 잘 가르켜줘

0
2019.02.11
@헤드셋을끼고

추천 고마워..!

0
2019.02.08

float: center는 없어

0
2019.02.09
@이예은2

float center 없어서 text-align center로 div 정렬하는데 다른방법 없음??

0
2019.02.09
@어그로학교수

가운데 둘꺼면 margin으로 좌우 값 auto줘서 하지 보통 div 넓이 지정해주고

0
2019.02.09
@이예은2
0
2019.02.08

그냥 flex 공부하자는 의미로 댓글 단건데 업계 노예들 많구만...

다들 화이팅

0

ㄳㄳ

0
2019.02.08

잘알들 많은가 본데 읽글 좀 써보는게 어때?

0
2019.02.09
@초보댓글러

한국에 웹잘알 너무 많아서 IT게에선 상식수준임

IT게 가서 물어보면 5분내로 정확한 답변 올라오는 수준;

0
@초보댓글러

애매하게 알아서 태클만 거는 애들이 많음

그리고 꼭 그런애들이 교양수준으로 글 쓰면

자기분야에 대해서 남들이 아는거에 과민반응 하는 애들이 많더라

읽판 초기에 잡지식 올렸었는데 하도 지랄해서 글 안씀

0
2019.02.09
@뭐했다고7렙인데

쩝.. 그럼 괜찮은 블로그라도 찾아야겠구낭 하긴 이런데선 괜히 물고늘어지는 애들 많을테니..

0
2019.02.09

난 주로 자바스크립트랑 자바만 쓰는데 css가 어렵다

0

와드

0
번호 제목 글쓴이 추천 수 날짜
공지 [게임] 게임 연재, 게임 정보는 게임 연재 판을 이용 해주시기 바랍니다 91 overflow 5 2017.04.18
공지 [기타 지식] 후기, 리뷰, 감상문은 허용 하지 않습니다 overflow 2 2016.07.29
공지 [기타 지식] 글 작성 금지 항목들 overflow 2 2014.04.06
공지 [기타 지식] 연속적인 글과 제목에 대하여 28 overflow 2 2013.08.11
공지 [기타 지식] 읽을 거리 판 입니다. 44 애드립 2 2012.07.25
9450 [기타 지식] 헬린이들은 글보지말고 운동이나 하세요 8 23689654 0 52 분 전
9449 [기타 지식] 헬린이인 내가 푸쉬업을 찬양하는 이유 29 Sharedsoul 1 5 시간 전
9448 [역사] 공포의 제국 아즈텍의 기괴한 풍습과 유적들 <3> 식인... 16 Taurus 14 8 시간 전
9447 [호러 괴담] 얼룩말 살인사건 5 그그그그 0 10 시간 전
9446 [기묘한 이야기] 내가 겪은 기묘하고 신기한 경험 5 꺄륵끼륵 2 14 시간 전
9445 [자연] 걸어서 땅끝마을까지_14화 5 sjfhwisksk 3 1 일 전
9444 [기타 지식] 트레이너 거르는 방법 및 헬린이가 운동을 배우는 순서 121 Sharedsoul 7 1 일 전
9443 [역사] 공포의 제국 아즈텍의 기괴한 풍습과 유적들 (2) 54 Taurus 31 2 일 전
9442 [기타 지식] 일반인들은 데드리프트 보통 어느정도 할까? 53 랩이 1 2 일 전
9441 [기묘한 이야기] 해리 터틀도브 - 황제의 귀환(The Emperor's Return) 1 오스만유머 0 2 일 전
9440 [호러 괴담] 게인즈빌의 리퍼 '대니 롤링' | 살인자 이야기 9 그그그그 6 2 일 전
9439 [유머] 준마 꼬리에 붙어 천 리를 가는 삶 18 한그르데아이사쯔 9 2 일 전
9438 [기묘한 이야기] 과거 노예들이 겪었던 실제 사례들 2 오스만유머 7 2 일 전
9437 [기묘한 이야기] 통수의 통수, 그리고 또 통수 오스만유머 2 2 일 전
9436 [역사] 공포의 제국 아즈텍의 기괴한 풍습과 유적들 #1 18 Taurus 44 2 일 전
9435 [호러 괴담] 단편공포영화 'Firebase' 5 비가오는날 2 3 일 전
9434 [호러 괴담] (약스압) 학교 기숙사 생활서 겪은 일 6 답도없넹 2 3 일 전
9433 [호러 괴담] [롯데월드 괴담] 4D 슈팅 씨어터 편 20 어휴ㅉㅉ 3 3 일 전
9432 [호러 괴담] [2ch 번역괴담] 편의점 (중복&유튭주의) 23 woog 3 4 일 전
9431 [역사] 스탈린 동지의 현대전 강의 18 오스만유머 10 4 일 전
서버에 요청 중입니다. 잠시만 기다려 주십시오...