기타 지식

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 공부해라

2019.02.07
@monoless

flex 하는데 돈을 다 썼어??

2019.02.07
@랜덤개드립

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

2019.02.08
@랜덤개드립

명품이 나의 가치를 매겨

2019.02.08
@monoless

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

2019.02.08
@재잘재잘

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

2019.02.08
@키보드

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

@재잘재잘

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

2019.02.08
@기동전사김기동

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

2019.02.08
@monoless

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

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

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

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

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

2019.02.08
@monoless

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

 

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

2019.02.08

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

2019.02.08
@치다

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

2019.02.08
@재잘재잘

polyfill

2019.02.08
@치다

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

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

2019.02.08

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

2019.02.08
@미친레후

나눈 stylus

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

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

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

2019.02.08

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

2019.02.11
@헤드셋을끼고

사이트좀 알려주라

2019.02.11
@Y0UDU

udemy.com 에서 구입했어

2019.02.11
@헤드셋을끼고

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

2019.02.11
@Y0UDU

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

2019.02.11
@헤드셋을끼고

추천 고마워..!

2019.02.08

float: center는 없어

2019.02.09
@이예은2

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

2019.02.09
@어그로학교수

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

2019.02.09
@이예은2
2019.02.08

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

다들 화이팅

ㄳㄳ

2019.02.08

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

2019.02.09
@초보댓글러

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

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

@초보댓글러

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

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

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

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

2019.02.09
@뭐했다고7렙인데

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

2019.02.09

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

와드

번호 제목 글쓴이 추천 수 날짜
공지 [게임] 게임 연재, 게임 정보는 게임 연재 판을 이용 해주시기 바랍니다 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
9143 [감동] [교양,예술] 괴상하지만 귀여운 행위예술 14 교양박사 1 1 일 전
9142 [호러 괴담] 학교 폭탄 살인범 '앤드류 케호' | 살인자 이야기 12 그그그그 5 1 일 전
9141 [호러 괴담] 군대에서 무서움에 땀흘린 썰.ssul 13 봉투 2 1 일 전
9140 [호러 괴담] 군대에서 직접 겪은 기묘한 일 15 술룱 6 1 일 전
9139 [기타 지식] 짱깨팟 사지마라 52 꼬다리 9 1 일 전
9138 [호러 괴담] 호주 최고형을 받은 여인 | 살인자 이야기 | 14 그그그그 6 2 일 전
9137 [역사] [밀리터리] 난공불락의 요새 "전설적인 세바스토폴" 11 무기달인 6 2 일 전
9136 [기타 지식] 가격대별 [유 / 무선] 이어폰 추천 가이드 54 MOSFET 9 2 일 전
9135 [호러 괴담] 진주 방화 살인범 안인득 | 살인자 이야기 | 36 그그그그 11 4 일 전
9134 [기타 지식] 국내 여자마라토너 선수들을 알아보자 27 니니즈 7 4 일 전
9133 [유머] 처녀 선생님 25 메갈보면쿵쾅대는놈 27 4 일 전
9132 [기타 지식] 일본만화계에 영향을 미친 만화가들.jpg 132 그사람과잘될거야 41 4 일 전
9131 [기타 지식] (스압)중가 해외브랜드 추천 74 하이데거 10 4 일 전
9130 [과학] 캐릭터 LCD가 작동하는 방법 19 너는나는너는나는너 6 5 일 전
9129 [역사] 창조 이전에 신은 뭘 하고 있었는가? 에 대한 아우구스티누스... 12 만등어 3 5 일 전
9128 [기타 지식] [펌-밀리터리] 상남자의 요격기 - MIG-25 22 보라뚱이 16 5 일 전
9127 [기타 지식] [펌-밀리터리] 아무리 구려도 잘 굴리면 쓸 수 있다 - Narwha... 15 보라뚱이 9 5 일 전
9126 [역사] [역사] 흔치 않은 친일파 14 바라트 성계 자치령 9 5 일 전
9125 [호러 괴담] 장난감 상자 살인마 | 살인자 이야기 | 16 그그그그 10 6 일 전
9124 [기묘한 이야기] 우리의 욕망은 자발적인 것일까? 30 댄디라이트 3 6 일 전
서버에 요청 중입니다. 잠시만 기다려 주십시오...