초보자 입문 CSS #01

서론

초보자를 위한 간단한 자료를 만들어 보고자 한다.

누군가에게는 도움이 되면 좋을 것 같아 이렇게 만들어서 포스팅 하게 되었다.

 

주로 웹디자이너 분들이나 퍼블리싱에 관심 있는 분들을 위한,

혹은 아무것도 모르는 초보자를 위한 강의이다.

 

매일매일 css에 대해서 조금씩 포스팅 할 계획이다.

 

초보자 입문 CSS #01 

실전에서 자주 사용하는 CSS 속성 및 설명

 

오늘은 첫번째 시간으로 CSS에는 아래와 같이

다양한 속성들이 있다라는것만 알아보고자

속성과 설명을 간단히 적어 볼 것입니다.

 

추후에 해당요소들의 사용법이나 세부 사항은 다음 게시물 부터 적을 예정입니다.

질문 있으시면 댓글로 남겨주시거나 채널톡으로 남겨주시면 빠른 피드백 받아 보실 수 있습니다.

 

크기 관련

width : 요소의 너비 (가로크기)
min-width : 요소의 최소 너비
max-width : 요소의 최대 너비
height : 요소의 높이 (세로크기)
min-height : 요소의 최소 높이
max-height : 요소의 최대 높이

 

폰트 관련 (글씨)

font-size : 폰트의 크기
font-weight : 폰트의 두께
font-family : 사용할 폰트
color : 폰트의 색상
letter-spacing : 자간 (글자 간격)
line-height : 행간 
text-indent : 들여쓰기, 설정한 크기만큼 들여쓰기 가능, -면 내어쓰기로 표현가능하다
text-align : 글자 정렬 [왼쪽 정렬, 오른쪽 정렬, 중앙 정렬, 양끝 정렬 4가지가 있다.]

 

배경관련

background-color : 배경색
background-image : 배경으로 사용할 이미지
background-size :  배경의 크기
background-repeat : 배경의 반복 유무

 

여백 관련 (중요)

padding : 안쪽 여백
padding-top : 안쪽 위쪽 여백
padding-right : 안쪽 오른쪽 여백
padding-bottom : 안쪽 아래쪽 여백
padding-left : 안쪽 왼쪽 여백

border : 테두리
border-top : 테두리 위쪽
border-right : 테두리 오른쪽
border-bottom : 테두리 아래쪽
border-left : 테두리 왼쪽

margin : 바깥쪽 여백
margin-top : 바깥쪽 위쪽 여백
margin-right : 바깥쪽 오른쪽 여백
margin-bottom : 바깥쪽 아래쪽 여백
margin-left : 바깥쪽 왼쪽 여백

 

기타 중요한 것들

box-sizing : 크기를 어디까지 포함 할건지 정하는 요소 (요소의 크기를 바깥쪽까지 포함할것인지, 안쪽 여백까지만 포함할것인지 등등을 정하는 중요한 요소이다)
display : 해당 요소의 속성을 정하는 역할 (인라인 요소, 블락요소, 보이지 않는 요소 등등)
box-shadow : 요소의 그림자 설정 ([x좌표 y좌표 번짐크기 생상]이 한세트이다. 여러개 사용가능하다 )
position : 요소의 위치를 결정하는 역할
z-index : 요소들 위치의 순서를 결정하는 역할 값이 높을수록 제일 먼저 보인다. (포지션이 설정되어야지 설정할수 있다.)
transition : 소요시간 (요소에 선택자나 변형이 생길때 바뀌는데 까지 걸리는 시간)
transform : 요소 변형하기 (키우거나, 움직이거나, 회전하거나 등등)
animation : 요소를 시간대별로 바꾸기 [전문가도 짜는데 어려움을 느끼는 속성중에 하나입니다.]

box-sizing이해를 돕기 위한 box모델

 

 

결론

나의 경우 학원에서 기초 개념을 알았고 회사에서 일을 하면서 내것으로 만들었다. 

나머지 막히는 부분들은 유튜브 강의와 인터넷 검색을 통해 숙달하였다.

 

개인적으로 학원을 추천하는 것은 아니다.

스스로 찾아봐서 코드가 눈에 익어야지 된다고 생각한다.

 

적어도 나의 코드를 보고 기초 개념을 잡아가고 

원하는 것을 잘만드는 수준까지 성장하는 사람이 나왔으면 좋겠다.

 

나중에 다양한 페이지들을 만들 계획이 있고

취업을 위한 포트폴리오 만들기도 진행해볼 생각이다.

 

일반인 분들은 이런게 있구나 하는정도면 충분하다 생각한다.

(못하는것은 전문가에게 맡기는게 맞다 생각한다.)

 

블로그나 홈페이지제작, 포트폴리오 제작 등에서 어려움 격는 분들이 있다면

꼭 답글이나 채널톡으로 메세지 남겨주면 좋겠다. 

 

앞으로 함께 배워나갔으면 좋겠다.