Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 11강 CSS 속성-II
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 풀수 입니다 자 11번째 강의에 css 속성 두 번째 시간을
진행하도록 하겠습니다 자 지난 시간에 우리가 알아봤던 css 속성 첫번째알아봤던 단 이라든가
뭐 url 함수 라든가 그런 것들도 중요합니다
하지만 오늘 배우는 학습하게 되는 마진과 패딩 다음에 박스 쌓일 징 보도
짜는 테크 & 이미지
노게 지난 시간 꽃들은 훨씬 중요한 놈들도 오늘은 여러분이
음 우리 그냥 흔한 말로 전심 박자 차리고 무한 반복을 통해서 꼭 전부
다 음 습득을 하셔야 되는 내용들입니다
자 먼저 하나씩 살펴보도록 할텐데요
마징가 패딩은 그동안 제가 조금 설명해 주셨어요 그래서 오늘 구체적으로
완벽하게 한번 파악을 해 보도록 하구요
그 다음에 이거 와 연관 지어서 박스 이징 속성도 살펴보도록
하겠습니다
다음에 보던 숨도 굉장히 중요해요 그래서
보도 총 자체가 중앙니라 보도 수성을 어떠한 태그의 내가 줬을 때
다른거에 영양 다른 거에 미치는 영향 들 그런것도 02 정확하게 파악을
하실 수 있어야 되겠습니다
그 다음에 백그라운드 이미지 속성 까지 알아보는 시간을 갖도록 하겠습니다
자 먼저 첫번째 알아볼 것은 마진 및 헤딩 속성입니다 맞은 및 펜 딩
속성은 아주 중요한 속성으로 정확한 속성의 의미를 알아야 합니다
무한 반복을 통해 완전히 습득합니다
자 보시면 먼저 이론들이 것부터 설명을 드릴게요 자 이게 오리지날 맛 잉
마진 가까 패딩 값이 들어가지 않은 0인 상태입니다 이래서 합격
가로가 200 세로 가 이 백이에요
음 이건 게 있는데 만약에 여기다가 상하 좌우 마진 시 픽셀 줬어요
잘 들어야 됩니다 자 그러면 오리지날 사이즈가 있죠 오리지날 사이즈
바깥쪽으로
c 픽셀 10 픽셀 시 픽셀
10 픽셀의 마진 여백이 생기는 거예요 제가 지금은 9분을 하기 위해서
약간 요런 색으로 표시하는 데 실제로는
텅 비어 있는 거에요 텅 비어있고 여백 말 다른 태그가 와서 어떤 요소가
와서 붙으면 어떻게 다른 테가 요렇게 있겠죠 이렇게 이렇게 즉 식 픽셀의
옆 에 공백이 생길 수가 있겠습니다
이게 맞은 이에요
자 패딩은
마진 처럼 이것도 10 픽셀 이렇게 공백을 줄 수가 있어요
자 이렇게 빨간색으로 제가 이렇게 표시는 게 이게 오리지날 해줍니다
그래서 오리지날 사이즈에서 쉬 픽 3시 여배우 지구 때문에 실제로 요
안에 있는 내용물이 들어 게 되면 여기서부터 내용물이 척 차고 쌓일 수가
있겠습니다
자 그러면 맞은 하고 페리 하고 좀 9분하는 방법이 여러분이 잘 보여야
되는데
패딩은 내가 만약에 백그라운드에 지금 파란색을 그게 넣었죠
그러면 맞은 같은 경우에는 요렇게 바깥쪽에 투명한 영역이 여백이 생기는
거예요
하지만 패딩은 내가 적용한 백그라운드 까 바깥쪽으로 확장됩니다 내용은
10팩 셀 안쪽에서 원래 오리지날을 갖고 있던 이렇게 여기서부터 내용물은
차 넣으실 수 있지만
백그라운드 는 바깥쪽으로 이렇게 확대됩니다
그러면 마진과 패딩을 다루 세금 어떻게 되요
패딩 에서 cpx 에 이렇게 되겠죠
원래 오리 지나자 이보다 쉽 쓸 늘어났습니다
늘어나고 백그라운드로 컬러다 적용되어 그리고 나서 어떻게 투명한 여백으로
시 픽셀 더 나갈 수가 있겠죠
그래서 마진에 의미
마진은 다시 한번 말씀드리면 원래 오리지날 사이즈에서 바깥쪽으로 cp 3
나가는데 내용물은 이렇게 찾을 정 어 원래 오리지날 사이즈의 만큼 어차
곡차 0 넣어 질 수 있지만 그 밑에 깔고 있는 백그라운드 칼라 는
바깥쪽으로 이 게다가 한다.는거
다음에 마진은 바깥쪽에 여백을 주는 데 투명하게
백그라운드 컬러가 나가지 않는 다는거 고 차이점을 알아 2시면 되겠습니다
잘해서 이런거 보면 공지사항 이에요 공지사항 있고 각각 마다 마징가
패딩에 들어가 있는 같습니다
그리고 이런걸 우리 해봤자 보도 레디언스 갖고 동글게 동글게 처리
해봤습니다
요거 코드를 한번 볼까요
다 11 강릉에서 11 다시 이를 꺼내 보도록 하겠습니다
음 제가 보시면
200 픽셀 200 체인 자지 rv 태그가 1 2 3 개가 되어
있어요
그리고 201 202 려고 다 들어가 있구요 자 들어가 인데
첫번째 바 데다 영어 좋습니다
화장 때문에 좌상단 딱 좋겠죠 그래서 첫 번째 div 모든 div 에 는
가로 세로가 200 이고요
글자는 하얀색 이고 텍스트 웨이트 글자의 두께는 볼드 졌구요
텍스트 얼라인 1 3 6 그 때문에 괄호
그래서 중앙 정렬이 될 수 있겠습니다 자 다음에 컨텐츠 1 콘텐츠 이
컨텐츠 3 콘텐츠 4
다 아이디를 부여 쪽 각 tiv 오다가
자 그래서 콘텐츠 일은 백그라운드 과 레드 먼저 쓰면서 레드 인거 그냥
있겠구요
자 그 다음에 컨텐츠 이에는 그린색의 백그라운드를 좋죠
그리고 마진을 상하 좌우 시가 방향을 들어갑니다 값은 그래서
상 탑 c 픽스 그 다음에 오른쪽 시 픽셀 아래쪽 c 픽셀 왼쪽 씨 픽스
그래서 10 피스 왠만큼 다 떨어지는거 확인이 될 수 있을 겁니다
다음의 세 번째 여 석은 파란색 이래요
파란 회로 좋습니다 그리고 나서 패딩을 분은 마진을 중 에러 패딩을 4
탑 오른쪽 아래쪽에 왼쪽을 다시 피스 였어요
자 왼쪽 크기 왼쪽 보자
오리지날 크기 오리는 보다 백그라운드가 시 픽셀 밖으로 들어갔어요
마진과 차이 점 확인해 되시겠죠
하지만 내용물 자체도 바깥쪽에서 부터 시작된 야 그걸 안다
원래 갖고있던 오리지날 사이즈 부터 시작이 됩니다
자 컨텐츠 사는 마진 c 픽셀 그 다음에 패딩 드셨어요 이렇게 그러면
닦았 종 여백 c 픽셀 있을 거고 그다음에 패딩 에 의해서 백그라운드 도
확정 된거 확인이 될 수가 있겠습니다
되시겠죠 그래서 맞음 과 패딩은 반드시 꼭 잘 아들 알아두셔야 되고 사용
방법은 쉬워요
시계방향으로 위에서부터 들어가면 되요 이렇게 근데 내 방향이다 같다
이렇게 가끔 연 한 아마 입력해주시면 탑 볼은 쪽 아래쪽 왼쪽 모두 다시
픽셀 동일하게 좀 낼 수 있고요 아니면 위아래가 갖고 다음에 좌우가 또
같다 그럴때는 이렇게 위 갑 1 마 위 아래 값 하나만 주시고 좌우 값
하나만 주시면
어코드를 제작해서 수가 있구요 만약에 여기에 이렇게 되있어요 3개만 기댈
세금 어떻게 되세요
자 얘는 탑 을 가리키고 요 얘는
오른쪽으로 갈게요 그 다음에는 아래쪽을 갈게 된다
그리고 나서 왼쪽 값이 없죠 없으면 어떻게 오른쪽 값을 재활용해서 사용이
되어 집니다
아 사용 방법 알아 2시구요
자 그 다음에
자 이거 볼까요
뭐 를 보면
음이 거죠
자 보시면 div 컨텐츠로 크게 감싸져 있구요
다 그 안에 이제 덩어리가 1 큰 덩어리가 1
두 개의 세계가 보입니다 3개 중에서 첫번째 보면 공지사항 있고 ul 로
리스트를 쭉 나옵니다 그래서 게시물 123돼 있고요
두번째도 똑같네 야모 공지사항 있고 ul 리스트 리스트 아이템을 계심을
1 남자 세 번째 도 마찬가지입니다
자 그런데 이것을 갖다가 div 블럭은 때니까 세로로 나야 됐을 것
같은데
얘를 휴 편 구조를 바꿨죠 그러면 플로트 레포트를 좋겠죠
자 그래서 보시면 다리 태그 어이
3 2 3 2 3 1 해외 그 다음에 컨텐츠 컨텐츠는
음 흔해 예정 큰 바퀴와 쪽에 가장 큰 div 애가 위드가 가루가 810
이구요 마진이 어떻게 영어에서 오토 입니다
가운데 정말 되는거고 있고요 백그라운드 칼라 회색으로 좋고 오버플로 2등
플로트 레프트 를 주면 이 플루트를 f2 를 쭉 우 난 후에 다음에 밑에
따라오는 녀석들의
그 속성에 도 플로네 프 트 속성이 그대로 다 전달해주고 있어요 그래서
이것을 막히게 그런 것을 막기 위해서 뭐 얘를 감싸고 현재 나를 감싸고
있는 태그 에다가 오버플로 휴대를 중 자 그러면 해당 태그의 말 애프터
젊 되고 그 다음에 이어지는 태그에는 적용이 안될 수가 있겠습니다
그래서 래프트 줬어요 di 베타 레프트 졌어요 그러니깐 다 왜 최종열
이죠 그래서 왼쪽에 왼쪽 왼쪽으로 다시 순천으로 부터 나왔구요
다음에 ul li res 타입 넘어졌어요 그러니깐 리 스 템 놓는 거구요
자 p 태그 피트가 볼까요 공지사항이 줘 공장 에다가 페이딩 0
위아래 0이고 좌우 20 픽셀 이래요 그래서 20세 위 아래는 0이고 좌
우만 영웅 된거구요
폰트 사이즈 1점으로 약간 퀴어 0.5 배 키워 일정 500 키운 거
같구요
자 저래서 요런거 보도 레이어스 들어가는데 엇 있을까요
제 여기 있네요 볼에 gsc 픽스 잘 보 도 레 디 어 스 값은
좌상 산 서부터 시작해서 쉽게 방으로 돌아가 지금도 돌아가면서 적용이
된다고 생각이 됩니다 그래서 시 픽셀 적으면 내 방향 다시 픽스 여기 c
픽셀 여기 시 픽셀 여기 시 픽스 여기 10세 모두 다시 픽스 예시
에듀스 모서리가 중구로 졌습니다
그 다음에
방금 했던 내용인데요 음 미드 깎아 화이트 값 높이 주구요 다음엔 마진
패딩 좋구요
보도 깝 좋구요 그 다음에 구조 선택자 를 이용해서 첫번째
마진 포도 다 용을 줬구요 두번째
박스 사이즈 적군요 그래서 박스 사이즈도 한번 알아보도록 하겠습니다
박스 사이즈가 뭐냐면
저희 건데요
브라우저를 열어 보면 용 들과 나올 수 있습니다
박살이 가 뭐냐면 보더 있죠 보도 보도는 각 태그의 각 요소의 바깥쪽에
외곽에 라인을 만들어주는 거죠
자와 라인은 기본적으로 오리지날 크기 바깥쪽으로 두께가 형성이 됩니다
음 되시겠죠 자 바깥쪽으로 형성이 되는데
바깥쪽에 형성된 거절 무슨 말인지 모르시는 분들을 위해서 잠깐 제가
간단하게 예제를 하나 만들어 볼게요
자 만약에
그치 의 부위가 있고
뭐 해 줘
컨텐츠 려가 께요 내용물을 그 다음에 또 어떻게 보이고 있습니다
자 이거 브라우저에서 확인을 해보면
러 영 되겠죠 자 여자가 제가
스타일을 주도록 합니다 자 먼저 str2 끝이 커서 전체의
선택 짜다가 마진 0
페이딩 도 영어를 주도록 하겠습니다 자담 의 div div
어 nth 에 제가 첫 번째 해서 게다 많은
위드 100세
에트 도 픽셀을 주도록 하겠습니다
이건 모든 div 듣고 똑같이 좀 할까요
예 적용 하구요 자 그 다음에
여기다가
div
첫 번째 그 다음에 div
두번째 이렇게 할게요 자 첫 번째 여성 에다가 팩 그라운드 구별하기
위해서 백그라운드를 레드를 주도록 하겠습니다
두번째는 백그라운드 컬러를
그린으로 할게요 이렇게 했는데
자 첫번째 여서 게다가 제가 음
박 첫 번째 정말 구요 2nd g 하이브 에다가
보도를 줘 볼게요 보더를
이제 o 픽스 쭉 해 줄게요 5 픽셀의
솔리드 에 회색으로 이렇게 주도록 하겠습니다 자 확인을 해보면 이렇게
되요
저야 근데 여기서 보시면 그 보도 5 픽셀의 두께가 애가 안고 있던 원래
사이즈 안쪽으로 들은게 아니라 바깥쪽으로 형상이 되죠 그래서 원래
오리지날 갖고 있던 사이즈보다 100사이즈 보다 5 픽셀 인가 2
왼쪽 픽스 오르트 오피 쓰니까 즉 총 다 에서 c 픽셀 만큼 면적이
넓어진 거겠죠
저 얘기 입니다 바깥쪽 형성된 다는거 보도 값은 바깥쪽으로 형성이 됩니다
이렇게 그런데 여기서 박스 사이즈 잉
박스 사이징 을 주면 보더 박스를 줘요 그러면 이 보도가 바깥쪽 형성된
게 아니라 안쪽으로 형성이 될 수가 있단 얘깁니다
여기서 첫번째 보면 200 픽셀 200 픽셀의 마진 10 이고 패딩 20
이에요
그리고 보도를 쉬 픽셀 줬어요
자 그럼 어서 첫 번째 div 두번째 div 세번째 di 브가 속성을 다
주는데
마진을 다시 영어로 바꿨어요 보도 0이고 패딩 내용이에요 백그라운드 칼라
빨간색 이에요 그러니까 어떻게 되요 이렇게 되겠죠
져 첫 번째 여서 온 200 의 입에 그냥 아무런 맞은 카페 딩가 보도
거 없습니다
자네 두 번째 서간 음 기존에 있던 속성의 속성 에다 백그라운드로 칼라
만 연두색을 바뀌었구요 그 다음에 박스 사이징 을 보도 박스로 바꿨어요
보드 박스 바꾸는 어떻게 되냐면 이렇게 바깥쪽으로 외곽으로 나가는 게
아니라 두께가 안쪽으로 이렇게 둘 수가 있습니다
태그 에서 안쪽으로 마찬가지로 아까이 거기서 제가
이거죠 여기서 제가 바깥으로 나가지 못하게 박스 사이징 을 어떻게 보더
박승 을 박스를 줘요
그런 어떻게 된다구요 안쪽으로 들어와서 이제 똑같죠
이제 우리 잘하고 결과적으로 어 이렇게 표시를 할 수가 있습니다
자 다음의 세 번째로 저는 박스 징을 컨텐츠 박스로 했어요
컨텐츠 박스 그러니까 바깥쪽으로 밀려나서 이렇게 형성이 될 수가
있겠습니다
그래서 박스 사이즈 속성은 보도를 어느 위치 안쪽에 인사에 대해 을
것이냐 아웃사이더 될 것이냐 결정 징거 없기 때문에 여러분들이 잘
하셨는데
기본적으로는 컨텐츠 바깥쪽으로 들어가요 들어 하는데 안쪽에 두고 싶을
때는
보도 박스를 이용해서 안쪽으로 들어갈 수 있고요
그리고 더 중요한 건 우리가 이 것처럼 이것처럼 주지 않았을 때 나는
분명 의 100 픽셀의 100 픽셀 자리지만 들었지만 실제 어떻게 되요
실제 면적을 차지 할 때는 이 보도 깝 까지 계산을 해서 총 10 픽셀이
터널을 한거죠 증례는 여기 면적을 차지하는 총 면적이 어떤 온다구요 10
810 픽셀이 되는 거죠
이렇게 계산을 정확해서 전체적인 레이어를 잡을 때의 고려를 해야 된다
자 다음에 보도 속성의 요부 독성은 많이 해봤기 때문에 요건 코드 리뷰
여기 성을 하고 넘어 갈게요
어 보 독성은 주께 해 주는거죠 어떻게 두께 주는데 이렇게 두께를
2 대 씨를 줄 수도 있어요 그러면 보더 스타일 솔리드 보더 위드 5
픽셀 두께를 주고 스타일을 솔리드 러 주고요
보도 칼라는 요걸로 줄 수 있대요 이렇게 해서 보도를 이렇게 3가지로
나눠서 위드 스타일 솔리 저희 컬러 3가지로 줄 수도 있구요
여기도 위드 스타일 컬러 3개 날숨 되고 대 시드 줘 대신은 이렇게
점선으로 표시됩니다
이렇게 줄 수도 있지만 이렇게 주면 코드가 많아 길어 지죠 그래서 보통
일반적으로 우리가 어떻게 사용한다.면 3가지 의 값을 이렇게 하나로
좋습니다
보더 여기가 두께
다음 여기가 스타일 여기가 칼라입니다 이렇게 좋습니다
자아 이제 여기 안나오는데 요렇게 요런 것도 있어요
이걸 좀 크게 하기 위해서 200 을 해볼까 얘기야
이 계획을 하고 예
자마의 나는 보조를 갔다가 여기 지금 위 아래 좌 오다 보도가 들어
왔잖아 이게 아니라
포도 탑만 주고 싶다 위쪽 마케 따로따로 줄 수도 있어요
금 어떻게 되겠어요 위 쪽만 보도 값이 들어간다
다 이렇게 해놓고 나서 어떻게 또
포더 바텀 등 안 주고 싶어요
그러면 위 아래만 이렇게 부분 쪽으로 우리가 얼마든지 라이트 하고 레프트
줄 수 있겠구요 얼마든지 넣어서 속성을 부여할 수가 있겠습니다
자보 돌의 쥬스 이용해서 이렇게 둥글게 등극에 처리할 수 있겠구요
사람의 배경을 지정한 속성을 살펴봅니다 배경 1 백그라운드 이미지 우리가
사용해 본적이 있습니다 그래서 백그라운드 이미지를 쓰는데 백그라운드
이미지 쓸 때 url
그 함수를 이용해서 이미지가 있는 경로를 지정한다. 있죠
써 백그라운드 이미지 쓰면 되는데 여기서 한가지 더 알아볼 것은
백그라운드 사이즈를 출소 했어요 기본 값이 100% 에요
100% 인데 여기 분 50% 정 5집 프롬 어떻게
50% 반 어 길이의 50분에 면적의 4분의 되겠죠 그래서 3회기
축소하면서 그
폐 크라우드와 깔릴 수가 있어요 쭉 나열 될 수가 있겠습니다
그리고 보시면
아 11 다시 4
자 div 가 2개가 보이죠 두 개가 보니깐
여기에 큰거 하나 남은 여기에 하는데요
자 보시면 똑같은 배경이미지를 쓰고 있어요
똑같은 배경이 있는 쓰고 있는데 위쪽은 백그라운드 사이즈 속성의 속성
값이 100% 입니다 100% 한거는 그냥 그대로 예요
내 갖고 있는가 그대로 근데 백그라운드로 사이즈를 50% 를 주셨어요
이 붙어 있자 3는 클로
오실 풀러 붙으니까 원래 갖고 있는 것보다 사이즈가 축소해서 반으로
축소해서 길이의 반이 축소된 거니까 면적은 4분의 1 축소된 거겠죠
축소 돼서 이렇게 쭉 배경에
나열이 될 수도 있겠습니다
아 그 다음에
자 이건 또 뭘까요
자 음 백그라운드 사진은 30% 한거구요
제가 30% 하면 괜히 작 조금 해주겠죠 쭉 조금 해주고
작은데 밑에 보시면 조그맣게 찔렀는데 더 이상 반복의 안되고 한 번만
반복되고 말죠
이럴 때는 체크 라운드 리피트 라는 속성을 또 우리가 이용할 수 있습니다
그래서 빼 크라운 리피트 를 좋았고 놀이 피트를 주면 이것도 샘플은 부채
되어있구요
놀이 피트를 주며 어떻게 한 번만 이렇게 배경으로 이미지가 나오고 나머지
리피트 반복되지 않는 이겠죠 반복되지 않게 도 할 수가 있구요
디폴트는 리피트 입니다 그래서 계속해서 반복되게 사용을 하실 수도
있겠습니다
예 그 다음에 여기 리피트 까지 알아 봤구요
아멘
뭔고 좀 더 알아볼까요 자유 를 통해서 하나씩 다 알아 볼게요
댓글 0개
등록된 댓글이 없습니다.