[5강] CSS 속성들 배우기

[5강] CSS 속성들 배우기



HTML에 CSS 속성을 적용하는 것을 배웁니다. CSS 속성은 너무나 다양하기 때문에 모두 외울 수는 없습니다. 필요 할 때마다 필요한 CSS 속성을 찾고 그것을 사용하는 방법으로 공부하시면 됩니다. 아래는 많이 사용되는 CSS 속성을 몇개 정리해 보았습니다. 해당 CSS 속성에 대해 자세히 공부하고 싶거나, 더 많은 CSS를 찾고 싶다면 구글에 CSS 속성 혹은 CSS property 라고 검색하면 다양한 정보를 확인 할 수 있습니다. 한글 정보가 부족하다면 영어로 검색해 w3schools 에서 확인하시는 것을 추천합니다.


/* 값을 고정할 땐 px, 디바이스 화면에 따라 변경할 땐 em */
font-size: 10px;
font-size: 1em;

/* --시작-- 위 아래 사이드만 선택하여 변경 가능한 태그들*/
/* 테두리를 꾸미는 border 속성 -top 과 같은 형식으로 특정 위치만 지정할 수 있다 */
border-top: 10px;
border-bottom: 10px;
border-left: 10px;
border-right:10px;

/* 한번에 쓸 수 있다. 보통 이렇게 많이 쓴다. 굷기는 10px 테두리 모양은 solid 색갈은 검정색 */
border: 10px solid black;
/* border 스타일만 변경하기 */
border-style: dotted;

/* 테두리의 모서리를 보다 둥글게 바꾸자 */
border-radius:10px;
border-left-radius:10px;

/* 선택된 태그 자체를 보다 뚱뚱하게 하는 padding */
padding-top:10px;
/* 위 아래 좌 우 모두 똑같이 padding을 줄 때 */
padding:10px;
/*위 아래 좌 우 모두 다르게 padding을 줄 때 위 오른쪽 아래 왼쪽 순으로 적는다*/
padding:10px 3px 2px 4px;
/* 선택된 태그가 아닌 태그의 바깥 경계부분을 더욱 뚱뚱하게 하는 margin */
margin-top:10px;
margin:10px;
margin:10px 2px 3px 5px;
/* --끝-- 위 아래 사이드만 선택하여 변경 가능한 태그들*/

/* --시작-- 글자 관련 태그들*/
font-size: 1em;
color:#fff;
line-height: 1em;
font-weight: 600;
text-align:center;
text-align:left;
/* --끝-- 글자 관련 태그들*/

/* 크기관련 태그들 */
width: 10px;
height: 10px;
height: auto;
min-width: 100px;
max-width: 100px;

bacground: black;

/* 우리가 배웠던 기본 block, inline 형식을 원하는 형식으로 바꾸기 */
display: block;
display: inline;
/* inline 안에서 block 효과를 넣기! inline 처럼 보이지만 높이와 넓이를 수정가능 */
display: inline-block;
/* 아예 보이지 않도록 처리하는 none */
display: none;

/* 강제로 CSS 적용하기 정확하게 적었음에도 적용되지 않을 때 사용하기 !important; */
color:#fff !important;
No comments yet. Be the first one to leave a thought.
Leave a comment

Leave a Comment

카카오 챗봇
공지사항
문의하기
  • 챗봇의 종류를 소개합니다.
    챗봇 종류
  • WPTEAM 사이트
  • PC 전용 서브 타이틀
    API형
  • 아이템 VIEW 설정
  • PC 카카오 전용 공지사항
  • PC VIEW 설정
  • 이미지형 답변
  • 메시지 종합형 답변
  • 버튼형
  • 라벨형 답변
  • 공지사항
    공지사항을 확인하세요!
    전체 PC 카카오톡 Mobile 카카오톡 의미없는 카테고리
    thumbnail

    현재 모바일의 카카오톡 모드

    2018-04-20 15:17:12
    현재 모바일 카카오톡 스마트 채팅의 경우 버튼형으로 테스트 진행하고 있으며, 얼마간의 테스트 이후 API형으로 변경 할 예정입니다.
    thumbnail

    현재 PC의 카카오톡 모드

    2018-04-20 15:16:10
    버튼형으로 설정되어 있는 상태이며, 각 키워드에 따른 그룹을 보여줍니다. 버튼형 테스트 이후 API형으로 변경 할 예정입니다.
    thumbnail

    안녕하세요. WPTEAM KAKAO CHAT BOT 플러그인 베타 테스트를 진행합니다.

    2018-04-20 15:14:55
    카카오톡 스마트 채팅 기능을 이용해 워드프레스 사이트에 원클릭 설치 및 이용 할 수 있는 카카오톡 챗봇을 개발하였습니다. 현재 WPTEAM 사이트 내에서 베타 테스트를 진행합니다. 관심 있으신 분들은 테스트해보세요~ 감사합니다.
    문의하기
    궁금한 사항을 문의주세요.

    도움이 필요하다면 언제라도 문의주세요.

    WPTEAM은 남들이 싫어하는 코드 분석, 유지보수를 즐깁니다. 코드가 길다면 보다 많은 시간이 걸리고 고된 것은 사실이나 그것을 그것 나름대로 즐길 줄 아는 코더입니다.

    우리가 할 수 있는 것들

    • 테마 자체 제작이 가능합니다. 원하는 기능이 무엇인가요? 저희는 워드프레스 REST API, 다음 맵, 구글 맵, 네이버 맵, 다음 주소, firebase 와 워드프레스 연동, 워드프레스 앱 만들기, hipchat api, cafe24 sms, 넥스모 sms, 페이팔, 이니시스, 스트라이프, 역경매, 실시간 채팅 등을 워드프레스로 제작해 보았습니다.
    • 어떠한 오류라도 해결해 드리겠습니다. 만들어진 테마에 오류가 생겼다면 문의주세요. 저희가 해결해드립니다.
    • 앱을 제작해드립니다. 단순 패키징 뿐만아니라 REST API를 이용해 PC와 데이터가 완벽하게 연동되는 앱을 만들어 드릴 수 있습니다.
    • 설계부터 함께 해드립니다. 프로젝트의 설계가 부족하다면 얼마든지 도와드릴 수 있습니다. 스토리 보드는 저희가 가장 잘 만드는 것들 중 하나입니다.

    감사합니다!

    언제라도 문의 주세요. WPTEAM mins9919@naver.com  
    카카오 챗봇
    질문을 제게 알려주세요.
    전송
    ← 뒤로가기