Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 10강 CSS 속성-I
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 불수 입니다 자 오늘 html css 열 번째 시간 css
속성 첫 번째 시간을 진행하도록 하겠습니다 자 제한 시간에 우리가 css음 제안까지 css 선택자 에 대해서 무수히 많은 선택자 같지만
아따 지고 보면 몇 개 안 되는 그 선택자 들에 대해서 살펴봤습니다
id 클래스 선택자 단의 태그 선택자 모자 전 선택자 동의 선택자 후손
선택자 링크 선택자 부정 선택자 등등해서 선택자를 알아 봤죠
그렇게 해서 정확하게 선택제 가 중요한 이유는 정확하게 내가 html
문서에 있는
어택을 을 또는 속성을 선택할 수 있어야지
그 선택되어진 태그나 속성의 내가 속성을 부여하고 수정하고 변경할 수가
있겠죠 그래서 선택지가 중요한 거구요
자 이제 오늘 적도 알아볼 것은 그렇게 선택을 했어요 선택을 하고 나서
그 안에 여러가지 속성이 있겠죠 그래서 그 속성을 하나씩 살펴보는 시간을
갖도록 하겠습니다 자 오늘은 첫 시간으로
css 에서 사용한 단위가 있어요 퍼센트 a gem 다니 픽스 요런
단위들을 좀 살펴보도록 하구요
그 다음에 url 함수 라는게 있습니다 그 다음에 디스플레이 속성
비저블 비자 빌리 t 속성 다음에 어퍼 스틱 속성에 대해서 살펴보는
시간을 갖도록 하겠습니다
자 그러면 첫 번째 우선 css3 에서 다니
100원 무엇이 있는지 한번 살펴보도록 합니다
자 css 스리 에서 잘 자주 사용되는 단위 들에 대해서 살펴봅니다
어 여기 쭉 보면 컨텐츠가 있고 p 태그 후손 선택자 자 그래서 컨텐츠의
p 태그에
어여 기 보면 구조 선택 다르네요 nth 차일드 첫 번째 첫 번째 에서
p 태그에 첫 번째 6억 두번째 6억 세 번째 여성 네번째 여색을
선택하고
p 태그에 호전 선택제 로스 펜 태그로 또 선택하게 되어있습니다
여기서 폰트 사이즈 폰트의 크기 겠죠 폰트의 크기를 1.6 이행을 주는데
자 이건 뭐냐면
pt 가 받고 있는 우리가 다니는 cs3 s 다니는 픽셀과
다음에 퍼센트 에이즈와
en 요정도 여러분이 사용을 하면 되겠습니다
픽셀은 말 그대로 1 픽셀 습성에서 이 픽스 의선 픽셀 40세 고액
이구요
퍼센트 지는 100% 가 기본 사이즈 이구요
100% 보다 작으면 촉수 100% 부터 크면 어떻게 확대 입니다
자 이 애매한 단어가 나오는데 이 단위가 조금 생소할 겁니다 이게 뭐냐면
1.02 m2 기본 디폴트 에어 l 저서 내가 어떤 문자 에 p 태그를
쓰고 있어요
p 태그로 써서 어떠한 글을 쭉 이렇게 정보를 표시하고 있습니다
이때 p 태그에 폰트 삶을 내가 지정하지 않아도 기본적으로 16 픽셀
정도의 크기를 갖고 있습니다
브라우저 마다 약간 차이는 데 대략 이렇구요
이때 이걸 이 햄으로 환산을 하면 애가 1.02 m 이에요
기본적으로 갖고 있는 그 사이즈 폰트 세리아 1.0 대
1.2 림 어떻게 되요 약간 커진거 고이면 어떻게 된다
두배로 커지는 거에요 0점 오면 어떻게 반으로 줄어든다는 이겠죠
요 그래서 1.6 이니까 1점 600 커진거 고 1.배 1.2 배
1.0 이면 똑같이 원래 기본 사이즈로 똑같이 된겁니다
잘해서 1.61 때 요기가 1.61 때 사이즈에요
다음에 1.41 때 1.21 때 여기가 기본 디폴트 1.01 대사입니다
자 예제를 한번 통해서 한번 살펴보도록 하겠습니다
주가 수 탓이 보죠
자 여기서 브라우저를 통해서 보도록 하면
자 이런 내용입니다 자 만약에
스타일 시트가 없다 저도 시장에서
뭐 이걸 다 날려 볼게요
자 이렇게 없다 그래서 새로고침 해 보면
없기 때문에 그냥 이렇게 기본적인 사이즈를 다 나옵니다
자 그런데 스타일리스트가 적용이 돼 있어요 그러면 이렇게 변경이 된다는
거죠 자 먼저 htm 의 구조를 먼저 살펴볼게요 자 렙 태그로 감싸져
있구요 렙 태그 안에 컨텐츠 일과 콘텐츠 기회에 큰 덩어리가 있습니다
그리고 각 컨텐츠 일에는 문단 태그 p 태그로 이렇게 계속해서 그들이
나오고 있습니다
자 먼저 첫번째 콘텐츠 1 서부터 논제 볼게요 컨텐츠 이를 보니까
웹 태그의 컨텐츠 일에 p 태그 p 태그 중에서
짝수 짝수 이녀석들의 백그라운드 컬러를 ffff df 해요 그래서 놓게
노란색 바탕으로 만들어 준 겁니다
구조 선택자 의 배수 를 이용한 거죠 애니 영석 조신한 들었습니다 그래서
0 0 이겠죠 없죠 그리고 1
2.22 두번째 그다음 a 가 들어가면 네번째 그런 식으로 해서 틈새
해주고 있고요 그 다음에
콘텐츠 이드 마찬가지로 이렇게 되고 있고요
자 컨텐츠 일과 콘텐츠 2회의 속성은 위드가 600 이래요
다음에 마진 오토 용어 가운데 정렬을 하고 있네요 다음에 보더 1 픽셀
주고 있고요 컬러는
텍스트의 컬러 3333 주고 그 진한 회색 일겁니다
자 폰트 웨이트는 볼 2를 죽으신 그래서 그 좋아 좀 더 볼 이체를
변하고 있죠
자 그 다음에 컨텐츠 일에 p 태그 에 첫 번째 녀석은 폰트 사이가
100% 레어 퍼센트를 지정하면 아빠 그랬죠 100% 면 기본 원래
자기가 갖고 있는 사이즈 그대로 널어서 여기 보면 사이즈가 털 반동이
없어요
자 두 번째 여정은 120% 레오 그래서 120% 적용되어 있구요
다음의 세 번째 건 140% 좀 더 커졌고 요 다음에 160% 면 조금
더 커져있는 거 확인이 가능합니다
자 그 다음에 컨텐츠 s 펜 태그 p 태그 s 펜 태가 있대요
어느 부분 일까요 자 p 태그에 그 다음에 그 밑에 후손 태그 중 s 펜
터 거야 날짜 날짜 부 날짜 부분은
엇 이거 쪼 날짜 부문은 디스플레이 먼저 블럭 이래요 블럭 이면 2d 에
따라 붙지 않고 어떻게 한 당의 내려오게 쪽 블럭으로
라인이 면 d 에 따라 근데 원래 스페인이 구조가 라인 구조의 그래서
뒤따라 보는데 것을 블록을 지정함으로써 갱 에서 밑으로 내려오게
만들었고요
다음에 컬러를 넣고 폰트 사이즈를 50% 주었어요
기본적으로 갖고 있는 거에 반으로 줄여 버린거죠 그래서 기본적인 값에서
다 반으로 주셨기 때문에 이렇게 조그맣게 표시가 될 수가 있겠습니다
이렇게 해서 컨텐츠 일에 대한 내용을 다 만들어 졌구요 콘텐츠 이는 em
을 적용 했어요
1.02 기본 써야지 라고 했죠 그래서 1.6 이면 어 1.6 빼 1점
사업 의 일정이 대 1.0 이면 그대로 겠죠 그래서 보시면 점점 큰거
에서 다음 곳을 그러다가 결국 어 동일한 1.02 예 미까 동일한
사이즈로 나은 표지가 될 수가 있구요
자 컨텐츠의 피해 후 전 태그 스 펜 태그를 보니까 이것도 블록을 지정
해줬네요 다음에 폰트 웨이트는 눈물이 래요
즉 볼 주체 주지 않고요 폰트 사이즈 16 픽셀 주고 있으니까 이렇게
표시가 될 수가 있겠습니다
여러분이 하나씩 따져보면 별로 이해하는 데 그렇게 큰 어려움은 없을겁니다
잘해서 css 사용 한다.니 픽셀과 이 앤과 퍼센트 ag 정리를 잘 해
주시는데 픽셀은 별로 어렵게 없을꺼 같구요 퍼센트 ag 는 100% 를
기준으로 100% 밑으로 내려가면 축소 100% 위로 올라가면 확대에
e&m 은 1.0 의 기준입니다 1.0 에서 올라가면 확대 내려가면 축소
그래서 2.0 이미 어떻게 2배 커지는 거에요
사이즈가 어떤어떤 크기는 몰라요
기본적으로 갖고 있는 사이즈에서 2배 커지는 겁니다 퍼센트 g 도
마찬가지 있구요
자 그 다음에 보시면
자 백그라운드로 이미지 url 속성 했는데 url 소속 뭐냐면 함 심
다음 주
그래서 페이크 라운드 이미지 속성을 줄 수가 있어요
자 이거 보면 요 이렇게 큰 사각형 안에 지금 필카 라운드 이미지가
들어가 있습니다
백그라운드 임질은 속성은 요렇게 줄 수가 있는데요
여기다가 이미지 경로 백그라운드 이미지가 이미지 경로가 들어가겠죠 그걸
우리가 유아를 함수 나타냅니다
그래서 이건 뭐 꺼릴 수도 있고 아니면 이렇게 원격지에 있는 값을 넣어
줘도 되겠습니다
자 이것도 코드를 보도록 할게요
코드를 보면
미리보기 를 해보면 이렇게 표시가 될 수가 있겠습니다 원격지에 있는 것을
계속 가져오기 때문에 조금 시간이 걸릴 수도 있고요
서버 에 속도 네트워크 환경에 따라서 적당히 적당히 속도 저
그 속도가 좌우됩니다
자 일단 코드 html 코드를 살펴 볼게요 자 렙 태그로 div 태그
나오고요 다음에 dip 또한 있는데 거기에는 컨텐츠의 때 해당 이미지는
저작권 구글 넣습니다 써 있구요
자 스타일시트 아주 볼까요 자 렙 태그는 위드가 팔베 그 다음에 마
진영의 오토와 가운데 정렬이 네요 요구 저밖에 외가 사각형
잠에 높이는 500 픽셀 이구요 보도는 1 픽셀의 솔리드 에 회색을 주
곳입니다
브라우저와 커져도 가운데 그리고 가운데 정렬이 되고 있겠죠
자 여기까지 하고 나서 자 그다음에 컨텐츠 콘텐츠 야 내비 감싸고
있는데요 안쪽에 있는 거죠 이 컨텐츠는
위드가 80% 래요 이 80% 100% 기준이 어디냐면 바깥쪽으로 나를
감싸고 있는 네비 저 산은 레벨 사이즈에서 80프로 여기서 10% 6
싶어 들어오겠죠
그 사이즈를 말라는 겁니다 자 높이는 100% 다 쓰는데요 베프 다
쓰니까 꽉차게 있구요
그 다음에 마 진영 오토 입니다
자 백그라운드 이미지가 나오겠죠 백그라운드 이미지
이렇게 백그라운드 이미지 내가 내가 무엇인가를 주고 싶어요 그럴때
사용하는 속성입니다
잔대 여기다가 url 함수를 쓸 수 있고요
여기에다가 어 이렇게 작은 따옴표 를 치고 그 안에다가 이미지의 경로로
코리 면 로컬 이미지 경로 너 원격지 면 원격지에 있는 이미지의 경로를
기입을 해주시면 되겠습니다 자 폰트 사이즈는 em 2배 크게 했구요
컬러는 폰트의 컬러는 화이트 고 폰트 의 두께는 볼 주최 고어텍스
어려있는 센터 가운데 정렬이 저기서 가능 정렬 시켰습니다
자 이렇게 해주고 나서 결과를 보니까 이렇게 결과 뭐 이런걸 가면
백그라운드로 이미지는 여기 해당 감성 div 태그 여기가 여기서 또
시작을 여기서 대장에서 이미 제 실제로 굉장히 커요
요 이미지가 어떤 거냐면
술 째로 요 끌고 와서 한번 브라우저의 더 폭 브라우저에서 어떤 의미인지
볼게요
주면 굉장히 큰 힘이죠 하지만 지금 내가 쓰고 사용하는데 사쿤 요만큼
밖에 안되기 때문에 이미지가 전부다 안보이고 일부 마음 보일 수가
있겠습니다
시작점은 좌측 상단 여기서 또 0 콤마 12 시작해서 요렇게 쭉 나올 수
있겠습니다
자 그 다음에 다시 장 표로 돌아올게요 그래서 페이크 라운드 이미지
유아를 적성 알아두시면 되겠구요
다음에 디스플레이 속성 굉장히 자주 사용하고 자주 사용하기 때문에 중요한
그 속성입니다
화면에 어떻게 보이는지를 설정 하는 속성입니다 다양한 속성 가기 있지만
주로 몇 가지만 많이 사용됩니다 서 있습니다
디스플레이 속성의 다음 속성 값은 매우 심한데 블럭 있고 있나 이니 골인
라인 블럭이 있어요
자 제가 지난번에 한번 말씀드린 에 다시 한 번 설명을 드릴께요
어 html 태그는 div 태그 듣고 p 태그 도 있고 스 펜 태그 들고
뭐 li 태그 도 있고 h1 태그도 여러가지가 있죠
그런데 기본적으로 크게 두 분류로 나누어져 요 블럭 인 블럭 속성의 태그
들이 있어요 대표적인게
div 각 좋습니다 블럭 이랑 거울이 레고블럭 이라고 생각하심 되요
즉 태그 p 아내가 갱 태그 같은것을 안써도 div 태그가 1 들어가고
그 다음에 트 div 태그가 또 들어가면 자동으로 이렇게 블록처럼 쌓아
나가는 거예요 제가 요런 적성 필테 그도 마찬가지로 불러 캐 겁니다
그리고 리스트 li 태그 도 자
자연의 블럭 이구요
시계 쪄 씩 예 자다 메인 나이는 뭐냐면 옆으로 계속해서 옆으로 추상
하는 거에요 프로
내가 대표적인게 s 펜 태그 라든가 이런거 옆으로 붙여 남는 게 손해가
별도의 p 태그나 br 태그로 갱을 해주지 않으면 계속해서 코딩 이
밑으로 코딩이 됐든 하더라도 로 옆으로 계속해서 붙혀 나간 거 있나
입니다
자 인 라인 블럭 뭐냐면 블럭에 갖고 있는 속성이 있어요 그 속성을
가지고 옆으로 붙여 나가는 방식입니다
자 그래서 보시면
어떠한 어떠한 이렇게 태그가 있어요 생각했는데 그것이 블럭 이면 이렇게
어떻게 순차적으로
타이핑 되어있는 순차적으로 이렇게 블럭 쌓듯이 층의 층의 구조를 가질
수가 있고요
자인 날리면 옆으로 붙여 나가는 거예요 부쩍 프로
그렇죠
사람의 어여 김은 인 라인 블럭이 있어요
자 블럭과 인 나의 차이가 있나 이는 옆으로 붙여 나간다 고 했고요
다음에 블록은 층층이 쌓아 나간다고 있죠 자 다른 차이점은 뭐냐면
업을 옥 같은 경우에는 요런 높이 값이 있어요
근데 인가 인가 등의 높이가 없어요 최소 까만 같습니다
작은데 인 라인 블록은 뭐냐면 인 라인 의 속성과 블럭의 손을 닦고 있는
거예요 즉 옆으로 이렇게 정렬이 되기도 하지만 어떻게
블럭을 갖고 있는 이 높이의 속성도 갖고 있는 거에요 그게 인 라인
블로그입니다
그래서 어떠한 요소의 다가 기본적으로 어떠한 요소들은 블럭에 옷을 갖고
있고 어떠한 요소들은 인 라인의 얻어 맞고 있는데 우리가 그것을 적절히
애 css 를 통해서
블럭 블럭 형태를 임란 으로 바꿀 수도 있구요 있나 형태를 임란 플러그
바꿀 수도 있고 속성을 변경해서 사용할 수가 있습니다
굉장히 중요한 내용인데요 한 번에 모든 것을 다 파악 행정으로 있고요
자꾸 써보고 경험에 의해서 많은 경험에 의해서 어 익혀 나갈 수가
있겠습니다
아 이제 18:00 3 인가요
10 다시 3 을 오픈해 보면 브라우저에서 일단 보겠습니다 자 프라
우주에서 보면 요런 구조에요 자 어떻게 이런 구조가 나온지 봅니다
자 div 태그로 계속해서 div div div div div dm
해석의 소아 9개의 dm 을 하세요 자 div 는 기본적으로 블럭 속성을
갖고 있죠 그러면 어떻게 기본적으로 쭉 내려 겠죠
만약에 스타일 시트가 없다 그러면
스타일 시트가 이렇게 없다 그럼 어떻게 되요 그냥 기본적으로 이렇게 는
이렇게 생겼을 겁니다 계속해서 내려오고 있죠 블록 형태로 어
저런데 스타일 a css 스타일 속성을 주어져서
이렇게 언제는 블록 이고 언제는 인 라인
또 언제는 인라인 블록으로 지정한 겁니다 자 먼저 nth 구조 선택자 를
선택했습니다 바디에 div 애 첫 번째 있는 6 얘는 자 위드가 100%
높이가 100%
백그라운드 칼을 하는 레드 속 글자는 하얀새 폰트 웨이트 볼드 에 텍스트
라인 센서 있습니다 해서 첫번째 이에요
그렇죠 뭐 그냥 우리가 여태까지 했던 내용인데 어플로 형태 그대로
들어가구요
자네 두 번째 diva 2nd 여긴다
두 번째 해석은 베개 베개 백그라운드 컬러 못하 별거 없네요
좋아해서 연주 제게 컨텐츠 이번 두 번째 블록을 만들었습니다
자 마찬가지로 세번째 네번째 별 다른거 없어요
백그라운드 컬러만 다를 뿐이지 뭐 별다른건 없습니다
자 그런데 여기 보시면 이제 5번째 다섯번째 문양 예정
얘는 기본적으로 불라 이 블럭 속성을 인라인을 바꿨어요
인 라인 으로 바꾼 하니까 높이를 100 픽셀을 조스 메도 불구하고
어떻게 높이가 속성 높이 숙성에 적용이 안됩니다
이게 인라인 속성의 특징 해요 임란 속성은 높이를 조 2
높이가 들어가지 않습니다
되시겠죠 자람에 마진 속성도 마찬가지에요 마진도
상하 좌우 다시피 쎄씨 들어갔죠
그저 자인 라인 속성 에서는
마진이 상하는 의미가 없어요 적용이 안된다는 얘기 여기서 상위 아래 c
픽셀 다 안전 겠죠
하지만 좌우로는 c 피스 들어가요 c 픽스를 여기 들어간거 보이시죠
이쪽도 시 픽셀의 공백이 생겼죠 102 생겼죠
그래서 인 라인 속성의 특징 상 하의 여백은 주어지지 않는다 높이도
의미가 없다
제가 그리고 어떻게
여배 좌 우만 값이 속성값이 적응되지 상하는 적용되지 않는다 라고 알고
계시면 될 것 같습니다
자 6번째 부 께요 6번째 보니까 아
가로 세로 100 픽셀 줬어요 근데 이것도 디스플레이 있나를 좋습니다
그리고 얘는 영어 여배우라 줬죠 8 안좋기 때문에 이렇게 되구요
다음에 7 버 임대 7번 출 번에는
패킹 셀 베 픽스 엘크 라운드 다 줬는데 이번엔 디스플레이 속성이 뭐
줬어요 논을 줬죠
자위 쪽에서는 인 라인을 좋았고 블럭을 잉 난 으로 바꾸는 걸 해 봤는데
이번에는 노을 줬어요 논을 주면 아예 화면에서 사라져 버려요 공간까지 4
라이트 아예 화면에서 날라가 버린 결과 난다 그래서 컨텐츠 치른 아예 안
보이게 되겠죠
안보이는 것 뿐만 아니라 원래 이 컨텐츠 7이 갖고 있던 태그가 갖고
있던 공감 마저도 날려버릴 수가 있겠습니다
이게 디스플레이 논 입니다
어디에 많이 응 되냐면 여러분들이 사이트 들어가면 어떤 메뉴가 어느
상황에서 는 보이고 어느 상일 안보이는 경우가 있어요
역 그럴땐 메뉴들을 가리거나 보이게 할 때 어떠한 특정 태그 특정 요소를
보이고 분위기 하거나 안보이게 할 때에 디스플레이 의논을 이용합니다
자 남의 8번째 in 은 8번째 여서 곁에는 가로 세로 100 그래서
디즈 프레인 나를 좋네요
자 이제 임대인이 옛날 져 아까 5 버너 똑같죠 뭐 있나 좋구요
자 그 다음에 9번째 성애는 인 라인 불러 올렸어요
자인 라인의 속성이 까 옆으로 붙어 옆으로 붙었죠 하지만 블럭의 속성을
좋기 때문에 이제는 높이 값도 음 적용이 될 수가 있겠습니다
인 라인 의 속성과 블럭의 속성을 참 똥 해놓은 인 라인 블럭 입니다
잘해서 크게 속성 블록 써 다음에 인라인 속성
다음에 잉 나임 블록 써 다음에 추가적으로 한 가지 더
화면상에서 아예 공간 마저도 빼버리는 어떤거 디스플레이 논 이라는 속성
까지 여러분이 잘 정리를 해 2시면 되겠습니다
그 다음에 비자비 1t 속성이 있는데 딱 용어만 봐도 뭔지 아시겠죠
화면상에 부울 것이냐 말 것인가를 초 거 결정을 합니다
댓글 0개
등록된 댓글이 없습니다.