ONLINE CLASS

웹퍼블리셔 [현장실습]

COURSE FOCUS

이 강의에서 배우는 핵심 실무

웹퍼블리셔 실습에서는 글꼴·행간·들여쓰기·문자 간격을 조정하고 배경과 그림자로 페이지의 표현을 다듬습니다. 유연한 박스 구성과 box-sizing, padding·border·content 영역의 관계를 살펴보며 레이아웃이 계산되는 방식을 익힙니다. 마우스 오버와 로딩 후 회전 효과, 서브페이지 코딩을 적용해 CSS 속성을 실제 화면 제작에 연결합니다.

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?

A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

◆

기업이 선택한 신뢰 강의

검증된 커리큘럼과 전문 강사진으로 높은 만족도를 제공합니다.

자세히 보기 >

REAL REVIEW

수강생 리얼후기!

실제 수강생의 학습 경험을 확인해 보세요.

수강후기를 불러오는 중입니다.

RECENT Q&A

최근 수강질문

최근 등록된 수강질문을 작성순서대로 확인해 보세요.

전체 수강질문 보기

ALZIO DEEP GUIDE

HTML·CSS을 더 깊게 이해하기

37강의 CSS 속성·페이지 구성·메뉴·브라우저 비교·Sass·공통 스타일을 연결합니다. 구형 Ruby Sass 환경을 현재 작성 도구와 구분하고 다른 사이트 코드의 분석과 복제 권한도 나눠 이해합니다.

공식 기술정보 확인37강 커리큘럼 연결2026 현재 기술정보

웹퍼블리셔 [현장실습] · 37강 · 36시간 39분

01

HTML·CSS은 무엇인가

HTML은 문서의 의미와 구조를 표현하고 CSS는 표시와 배치를 구성합니다. 브라우저가 문서를 해석해 화면을 만들며 JavaScript는 동작을 추가할 수 있습니다. 태그와 색상을 외우는 것보다 내용의 구조·표시 규칙·사용자 입력을 나눠 이해하는 것이 중요합니다.

02

관련 플랫폼과 개발도구의 관계

문서 파일·스타일시트·이미지·폰트는 경로와 응답 조건으로 연결됩니다. 브라우저는 HTML과 CSS를 해석하고 서버는 필요한 자료를 전달합니다. Bootstrap과 Sass는 각각 UI 구성 도구와 CSS 작성·변환 도구이며 HTML·CSS 자체를 대신하는 별도 표준은 아닙니다.

03

HTML·CSS의 핵심 기능

기술 자체의 기능과 이 강좌의 직접 학습 범위는 다릅니다. 아래 연결 표시는 저장된 공개 커리큘럼에 근거합니다.

문서 구조·의미

제목·문단·목록·표·폼의 역할을 나타냅니다. 내용을 올바르게 구분하면 브라우저와 보조 도구가 구조를 이해하기 쉽습니다. 큰 글자처럼 보이게 했다는 것과 의미 있는 제목 요소를 사용했다는 것은 다릅니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

선택자·캐스케이드

어떤 요소에 어떤 표시 규칙이 적용될지 정합니다. 같은 속성이 겹칠 때 결과를 설명하는 데 중요합니다. 무조건 !important를 추가하기보다 적용된 선언과 조건을 먼저 확인합니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

박스·레이아웃

콘텐츠·여백·테두리와 요소의 배치 공간을 구성합니다. 실제 차지한 크기를 확인하면 예상보다 넓어진 요소나 잘린 자료를 찾기 쉽습니다. 지정한 width가 언제나 바깥 크기와 같다고 가정하지 않습니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

반응형·호환성

공간과 환경에 맞춰 표시를 조정합니다. 긴 글·확대·다른 화면 폭에서 결과를 확인해야 합니다. 한 브라우저의 한 폭에서 보였다고 모든 환경이 동일하다는 뜻은 아닙니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

폼·링크·입력 상태

이동과 사용자 입력의 구조를 표현합니다. 키보드 초점과 레이블·입력 조건을 확인하면 클릭 중심 화면의 불편을 줄일 수 있습니다. 브라우저의 입력 검사와 서버의 자료 검증은 다른 단계입니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

변환·전환·애니메이션

상태 변화와 움직임을 표현합니다. 시작·끝·시간·반복 조건을 나눠야 원하는 동작을 재현하기 쉽습니다. 과도한 움직임과 표시만 변한 상태가 실제 작업 결과를 대신하지 않도록 확인합니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

작성 도구와 프레임워크

반복되는 스타일 구성과 코드 작성을 돕습니다. 생성된 CSS와 도구별 버전·클래스 규칙을 읽어야 수정할 부분을 찾을 수 있습니다. 도구를 설치한 것과 모든 브라우저에 맞는 화면이 완성된 것은 다릅니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

04

이 과정의 실제 작업 흐름

1~20강은 텍스트·배경·배치·박스·표·인쇄·폰트·움직임·Flex·다단·변환입니다. 개별 속성의 결과를 원래 문서 구조와 비교하세요. 21~29강은 실제 페이지·폼·메뉴·효과로 여러 규칙을 연결합니다.

30~34강은 메뉴·홈페이지·CSS 분석·브라우저 차이이며 35~37강은 Ruby Sass·SCSS·프로파일·mixin·Compass·Bourbon·공통 박스 규칙입니다. 예전 도구의 명령과 현재 설치 조건을 같은 것으로 가정하지 않습니다.

CSS 속성
박스·텍스트
페이지 구성
메뉴·효과
브라우저 비교
Sass·공통 규칙

05

핵심 구조를 이해하는 방법

CSS 결과는 상속만으로 결정되지 않습니다. 선택자의 우선순위·선언 순서·적용 조건과 박스 모델을 함께 봐야 합니다. 문서의 중첩 구조와 화면의 위치는 같은 개념이 아니므로 요소가 어디에 속하고 어느 영역을 차지하는지 따로 확인하세요.

06

실무 적용과 결과 확인

4~8·19~25강을 복습할 때 박스 크기·레이아웃 기준·글자 줄바꿈을 별도로 기록하세요. 긴 텍스트와 다른 화면 폭 비교는 추가 점검 제안입니다. 화면이 맞아 보이는 것과 모든 환경에서 동일한 결과가 확인된 것은 다릅니다.

32강 CSS 분석은 어떤 규칙이 적용됐는지 읽는 학습으로 활용하세요. 다른 사이트의 표현·코드를 사용할 권한은 별도 문제입니다. 35~37강의 생성 CSS를 직접 작성한 CSS와 비교해 원본 파일·변환 결과·소스맵의 역할을 정리해 보세요.

07

이 강좌에서 집중할 전문주제

본 과정의 전문 축은 여러 페이지와 공통 스타일의 관리입니다. 21~31강에서 구조·메뉴·폼·효과를 묶고 35~37강에서 변수·mixin·반복과 공통 규칙으로 연결합니다. 재사용 규칙과 페이지별 예외를 나누면 수정 범위를 설명하기 쉽습니다.

33~34강의 브라우저 동일 출력이라는 공개 제목을 현재 모든 브라우저의 동일 결과 보장으로 해석하지 않습니다. 현재 엔진·폰트·지원 기능·입력 조건별 검증이 필요합니다. 새 CSS 기능 전체를 직접 제공하는 강좌로 확대하지 않습니다.

08

현재 기술과 강좌 환경의 관계

35~36강에 Ruby Sass·gem·Compass 등 당시 도구가 명시되어 있습니다. 정확한 브라우저·Sass 패치와 다른 의존성은 미확정입니다. 현행 Sass 구성 전체와 구형 제작 환경을 구분합니다.

Ruby Sass는 공식 프로젝트에서 지원 종료로 안내됩니다. 새 작업의 Sass 도구는 현재 지원되는 구현과 문법·모듈 조건을 확인해야 합니다. 기존 SCSS를 읽는 학습 의미는 있지만 구형 도구 설치를 현재 기본 환경처럼 표시하지 않습니다.

09

목적에 맞는 기술 선택과 비교

아래 비교는 목적과 작업 구조를 선택하기 위한 안내입니다. 다른 기술 전체를 본 강좌에서 가르친다는 뜻은 아닙니다.

목적에 맞는 기술 선택과 비교
선택지	작업 접근	이 강좌와의 관계
직접 CSS	속성과 배치 규칙을 직접 확인	1~34강 기반
Sass·SCSS	스타일 작성과 변환·재사용	35~37강은 구형 도구 포함
UI 프레임워크	구성 규칙과 컴포넌트 활용	직접 구성과 다른 접근

10

기술개념과 알지오 커리큘럼 연결

회차는 공개 커리큘럼의 실제 순서입니다. 실습 후 응용 제안과 현재 기술 참고정보를 강의에서 제공하는 실습으로 해석하지 않습니다.

기술개념과 알지오 커리큘럼 연결
기능·개념	무엇인가	실무 의미	강좌 회차	학습 상태
텍스트·배경·배치·박스	화면의 개별 표시 규칙	크기·흐름·우선순위	1·2·3·4·5·6·7강	강좌에서 직접 학습
표·인쇄·글자·폰트	자료 표현과 출력	다른 출력 조건	8·9·10·11·12·13·14·15·16강	강좌에서 직접 학습
움직임·Flex·다단·변환	배치와 시간 변화	영역·상태 구분	17·18·19·20강	강좌에서 직접 학습
페이지·폼·메뉴·효과	규칙의 실제 조합	구성별 결과 확인	21·22·23·24·25·26·27·28·29강	강좌에서 직접 학습
제작·코드 분석·브라우저	실제 화면과 규칙 조사	환경별 검증	30·31·32·33·34강	강좌에서 직접 학습
SCSS·공통 규칙·구형 도구	스타일 재사용과 변환	원본·결과와 지원 상태	35·36·37강	강좌에서 직접 학습

11

처음 배울 때 자주 생기는 오해

width만 맞추면 박스 크기가 같은가?

여백·테두리·box-sizing도 확인합니다. 5~8·37강을 함께 읽으세요. 콘텐츠 크기와 바깥 크기를 같은 것으로 가정하지 않습니다.

모든 브라우저에 완전히 같은 화면을 보장하나?

현재 조건별 검증이 필요합니다. 33~34강의 제목은 실습 목표로 읽습니다. 현재 모든 엔진·폰트·기능의 동일 결과 보장으로 확대하지 않습니다.

Sass는 브라우저가 그대로 실행하나?

CSS로 변환하는 작성 도구입니다. 35~37강에서 원본과 결과를 구분하세요. 생성 과정과 브라우저 표시 과정은 다릅니다.

Ruby Sass가 현재 기본 도구인가?

공식적으로 지원 종료된 구현입니다. 강좌의 당시 환경과 현재 대안을 구분하세요. 과거 코드를 읽는 의미와 새 환경 선택은 다른 판단입니다.

CSS 분석이면 복제 권한도 얻나?

작동 원리와 사용 권한은 별개입니다. 32강을 규칙 이해의 학습으로 활용하세요. 다른 사이트의 코드·표현을 자동으로 자유롭게 복제할 수 있다고 안내하지 않습니다.

효과가 되면 키보드 사용도 정상인가?

초점과 입력 경로를 따로 확인해야 합니다. 26~29강 메뉴를 여러 입력 조건과 비교하세요. 전체 접근성 검증이 제공된다고 단정하지 않습니다.

12

다음 학습 방향

HTML5 CSS3 실무

페이지 효과와 CSS 상속을 다른 실습으로 비교합니다.

자료 보기 →

자바스크립트 ES6 [입문부터 고급까지]

언어 동작과 자료 처리까지 확장할 때 범위를 확인합니다.

자료 보기 →

HTML·CSS 관련 과정 비교

입문·실무·심화 과정의 실제 커리큘럼을 목적에 맞게 비교합니다.

자료 보기 →

실습과 복습 계획

새 환경에서 예제를 확인하고 학습 계획을 세우는 방법을 살펴봅니다.

자료 보기 →

웹퍼블리셔 [현장실습]

웹퍼블리셔 [현장실습]

웹퍼블리셔 [현장실습]

강의구성
(37강) 전체 : 36시간 39분|평균 : 59분25초

이용기간/강사
1개월2개월
알지오 R&D [IT]

증빙가능
수료증, 수강증, 학습진도

수강료
330,000원165,000원

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q 초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?

A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

01.1시간 5분 코딩실무까지 완벽 마스터 1
font, line-height, text-indent, text-align, white-space, vertical-align

font-family, generic-family, 실습 cursive, fantasy, monospace, oblique, normal, extra-expanded, ultra-expanded, normal, length, none, 수치, 실습, white-space, 길이, super, bottom
02.1시간 6분 코딩실무까지 완벽 마스터 2
word-spacing, letter-spacing, text-decoration, text-transform, shadow, background

word-spacing, 길이, 실습, 실습, 실습, unicode-bidi, text shadow, 색상, CSS2.1(RGB 숫자형), 명도차 계산법, background repeat, 이미지 좌표 사용하기
03.55분 코딩실무까지 완벽 마스터 3
link, background, display, visibility

background position, 백분율, 실습, a:link, a:visited, a:active, a:hover, a:focus, background attachment, 실습, 실습, inline, 실습, inline-table, 실습, 실습
04.1시간 3분 코딩실무까지 완벽 마스터 4
position, z-index, overflow, float

position, 예제실습, 예제, top, right, bottom, left, number, 자연 스택순서, clip 주의사항, visible, visible 실습, float, 실습, clear, 예제
05.40분 코딩실무까지 완벽 마스터 5
min, max

width, 백분율, auto, 백분율 실습, inherit, 백분율, height, 길이 실습, inherit, none, inherit, R&D 팀소개
06.1시간 1분 코딩실무까지 완벽 마스터 6
margin, Padding

margin-top, 길이 실습, auto, 백분율 예제, margin-left, margin, 백분율, auto 예제, 길이, 백분율, 길이, 길이, tip
07.1시간 44분 코딩실무까지 완벽 마스터 7
Border

Border-Top-Style, dashed 실습, inset, solid 실습, dotted, dashed 실습, none, hidden, dotted, dashed, solid, Border-Top-width, thick, thin, 실습, thin medium thick 길이 inherit, Border-Top-color, transparent, 예제, color 예제, color, 예제, Border-color, Border-Bottom, Border-Right 예제, 이미지 예제
08.1시간 34분 코딩실무까지 완벽 마스터 8
List-Style-Type, Table-layout, Border-Collapse, Border-spacing, Empty-cells, Caption-side

List-Style-Type, none 실습, decimal 실습, armenian 실습, lower-latin 실습, List-Style-image, url 예제, inside 예제, List-Style-image, fixed, Border-Collapse 실습, Border-spacing, show, top, 예제
09.45분 코딩실무까지 완벽 마스터 9
Counter, Quotes

Content, counter, counter 실습, Counter-increment 실습, Counter-Reset, <초기값>, Counter-Reset 예제2, inherit, Quotes 예제2
10.1시간 7분 코딩실무까지 완벽 마스터 10
Cursor, Outline

Cursor, default, wait, ne-resize, crosshair, pointer, move 예제, 실습, Outline-style 예제, invert 실습, thick, Outline-Width 예제2, Outline 실습, Outline 예제2
11.36분 코딩실무까지 완벽 마스터 11
Page, Orphans, Widows

Page-Break-Before, avoid, auto, right, avoid, @page, <정수>, auto 예제
12.47분 코딩실무까지 완벽 마스터 12
tab-size, line-break, word-break, hyphens, text

text-space-collapse, preserve, tab-size 예제, line-break 실습, word-break 한글 예제, text-align-last, text-align-last 예제2, inter-word, distribute, kashida 예제
13.44분 코딩실무까지 완벽 마스터 13
hanging, writing-mode, background

hanging-punctuation, hanging-punctuation 팁, text-decoration-line 예제, text-decoration-color 예제2, text-underline-position 예제, vertical-lr, background-clip 예제, background-origin 예제3
14.45분 코딩실무까지 완벽 마스터 14
background, border

background-size, 백분율-영역 비례, 백분율 실습, 백분율-두개의 값 입력, 4개의 값 지정, 다양한 예제, <이미지> 예제, 선의 좌표, 예제
15.52분 코딩실무까지 완벽 마스터 15
border, box, overflow

border-image-width, 길이 예제, number 예제, border-image-repeat 예제, slice, y-방향값, box-shadow 성격1, overflow-x 사용 예, no-display, no-content 예제, no-display, no-content 예제
16.1시간 20분 코딩실무까지 완벽 마스터 16
text, @font-face

CSS Property, 속성을 지정해줄때 참고할 점, d-circle 클래스 선언, 대체 가능한 속성 설명, 결과확인, string 속성적용확인, 예제, blur, color값 적용, 예제, font-stretch, 특정 폰트사용
17.57분 코딩실무까지 완벽 마스터 17
animation, @keyframes

animation keyframes 속성, 기본예제 결과 확인, 브라우저별 코드 적용, keyframes 선언, 애니메이션 진행결과 확인, 이동위치값 변경, play 상태값 확인, ease-out 효과 적용, 애니메이션 방향속성, 애니메이션의 적용시 속성 값 적용
18.60분 코딩실무까지 완벽 마스터 18
shadow

box-shadow 속성, 기본 클래스 선언, 그림자 위치 지정, 브라우저의 페이지 적용, box-decoration-break, 결과 값 적용 확인, 기본 속성값 적용, 결과 값 적용 확인, 결과 확인 비교
19.53분 코딩실무까지 완벽 마스터 19
box, flexible

box-direction, 방향확인, 속성 지정값 변경, 옵션값적용 비교, 기본 구성 코드 확인, 예제 결과 이미지 확인, 결과 확인, 기본 속성 적용 스타일 추가, 그룹 값 설정, 결과확인
20.59분 코딩실무까지 완벽 마스터 20
multi-column, transform

multi-column properties, 다단적용 속성의 옵션값들, 같은 영역안에서의 다단 효과, 좌표값에서의 위치적용변화, 브라우저적용 속성 확인, scale, 기본 옵션 설정 값 확인, 여러개 값 지정시 속성 적용 방법, 속성 결과값 확인, transiton 속성
현업 퍼블리싱
21.29분 페이지 코딩 실습 Part 1
페이지를 구성하는 프레임들을 코딩하며 구성요소들을 실습합니다.

각 기기의 페이지 구성, *의 의미, css연동시 유의점, message창 스타일, TOP메뉴 스타일, 검사속성
22.33분 페이지 코딩 실습 Part 2
W3C의 HTML5 CSS3의 표준 인증테스트, 검색에 노출되는 TIP, 상속관계 난이도

CSS 연동페이지 확인하기, W3C 검사페이지 (인증테스트), 검색에 노출되는 TIP, inline 설정과 Block설정, m2line(구분선), munue 부분, fourth 부분
23.26분 페이지 코딩 실습 Part 3
반응형이 아니어도 어떤 해상도에서도 일그러짐없이 유지, 한글폰트 css 깨짐까지 해결하는 제작스킬

인트로, 반영된부분 주석처리 의미, 한글폰트 깨짐 해결, amain 항목, bottom box 항목, footer 항목
24.42분 페이지 코딩 실습 Part 4
또다른 2개의 페이지를 실습하면서 상속관계와 계층, 레이아웃이 점령할 영역의 기준에 대해서 구체적으로 실습합니다.
25.42분 페이지 코딩 실습 Part 5
진정한 퍼블리셔의 방식으로 가로 3단 페이지 실습과 폼 관련 요소들과 가상클래스의 컨텐츠 제작스킬을 알려드립니다.
26.33분 페이지 코딩 실습 Part 6
메뉴실습 2가지 CSS만으로도 마우스 오버와 포커스에 하부메뉴 출력, 마우스 종류별 트랜지션 효과, 툴팁
27.38분 페이지 코딩 실습 Part 7
종류별 슬라이딩 메뉴 인풋과 일반 메뉴를 로딩과 동시에 애니메니션 효과, 이미지 색상 및 알파값으로 나오게 합니다.
28.28분 페이지 코딩 실습 Part 8
마우스오버 시계방향 및 로딩 후 회전과 속도, 일반 서브 페이지 제작 1, 2
29.37분 페이지 코딩 실습 Part 9 (완결!)
여러 페이지 실습과 종류별 애니메이션 메뉴와 입체버튼 제작으로 전문적인 코딩을 할 수 있게 합니다.
[실무자 초빙 강의] 실무역량 강화를 위한 웹표준 실전편
30.1시간 25분 잘 만들어진 웹사이트 제작 NO1
실무에 활용도가 높은 메뉴&홈페이지 제작하면서 레이아웃 구성과 디자인 익히기

완성 홈페이지 살펴보기, 전체적인 레이아웃, header a, nav 정의, nav ul li a:hover, article 정의, #welcome .col-2, #welcome ul li a:hover, section h1, section a.btn span, section2, #recent-articles .article-1, #recent-articles .article-2 a.btn, #personal-overview .overview-1, #personal-overview .overview-2 ul
31.1시간 25분 잘 만들어진 웹사이트 제작 NO2
실무에 활용도가 높은 메뉴&홈페이지 제작하면서 레이아웃 구성과 디자인 익히기

완성 홈페이지 살펴보기, 전체적인 레이아웃, 현재 적용상황, #globalheader #globalnav, 메뉴 이미지 불러오기, #g-search, 동영상 이미지 삽입, #main, border solid, #billboard .videos-thumb:hover i .play, 레이아웃 정리, aside 정의, .promos ul li.last-child, .promos ul li a
CSS코드 분석
32.56분 CSS코드 분석 활용 방법
다른 웹사이트에 적용된 CSS코딩을 내 웹페이지에 그대로 적용할 수 있게 하는 방법 및 어떤 웹페이지도 분석해낼수 있는 CSS코딩의 지존이 될 수 있는 고급기술을 알려드립니다.

웹표준 사이트 제작의 기본 단계, 웹표준 사이트의 구성요소, 웹표준의 주요점, 플러그인 작동 방식, computed style 보기, 이미지 오퍼시티 해제, main 클래스 보기, 문서구조상으로 보기, head 적용된 속성값 보기, 폰트페이스 적용, 마진, 패딩값 입력, 아이콘 예로 style 적용
모든 브라우저
33.1시간 2분 제작한 그대로 문제없이 모든 브라우저에서 동일하게 출력
(css) 크롬, 사파리, 파이어폭스, IE 및 windows 버전별 동일, (image) 이미지 한장으로 모든 이미지 해결

모든 브라우저, 이미지 한장으로 표현, 본문 살펴보기, 검색 버튼, overflow: hidden, list-style: none, width, height, 카테고리, background: url, 웹기획 이미지, :first-child, 이미지 스킨, 수강신청, 샘플 버튼, margin-left
34.1시간 10분 모든 브라우저 실무코딩
직접 css코딩 노하우 전달

기본 문서 살펴보기, 모바일 홈페이지에서 사용하는 소스 코드, .allpage, float: left, 포토샵으로 이미지 사이즈 정하기, .menu .azmen6, .shadowbox, .leftnavigation li .front, .lefthot li, #main .subone p {line-height:180%;}, color, display: inline-block, width, height, display:inline-block, width, display: inline-block, background: url
SASS(SCSS)
35.2시간 3분 chapter 1
ruby sass 설치, gem update, watch app, sass:public, SCSS 컴파일, 변수, cmd 열기, Mapping, 주석처리 - 줄맞춤, 재실행, 변수정의, ID생성, $magin-top-1, WARNING on line of Error 설명, border-radius($radius3) - @extend, 백분율 계산, (UTF-8), 출력스타일 정의, compressed nested compact expanded - 한글출력 처리, $value * 1px, cursor: n + -resize, scss의 차이 변환, map-values, @each, map-get, sourceMappingURL - @if map-has-key, map-merge, Error 발생, @each, nth, $:hover, @extend.sra, @media, @impor

css 모듈, ruby 설치, sass 설치, gem i sass, alview.css 와 alview의 차이점, Error 발생, sass에 대한 변수 처리, value값과 변수명 동일화, WARNING on line 23 of all.sass, .sra, .aas, 출력스타일 정의, .abvfr, color값에 대한 변수정의, start, end 필터값, $class: accr, $font:, 중첩기능, 주석처리, 클래스 생성(.div), 클래스명(.alzio) 확장, @media (min-width: 300px), padding, @import 'abcde/al2im'
36.2시간 0분 chapter 2
sass-mq --save, _mq.scss, @import, @include mq, $from, media 쿼리, min-width, max-width, min-device-pixel-ratio, min-resolution, @extend, @mixin, webkit moz ms o, @each , @if, column-gap, @content, @warn, @for, @while, @function, @return, @media print, @at-root, gem install compass, compass create alziosass, config.rb, syntax 옵션, compass compile, sass-cache, bower_components, gem install bourbon

주석문구 추가, lib 폴더(compass,animation), alzioyess --syntax scss, ANSI → UTF-8, 스타일시트 속성, font size, font-family 정의, import
37.1시간 37분 chapter 3
글꼴 세팅(정의), font-face, Padding Box, Border Box, content-box, text-shadow, border-radius, box-shadow, box-sizing, display: inline-block, vertical-align, user-interface, placeholde, global-reset, reset-box-model, overflow scroll, reset-list-style, reset-image-anchor-border, reset-html5, @charset, reset-html5, nested-reset, layout, #root,#root_footer,#footer

한글 글꼴, 글꼴 세팅(정의), compass 폴더 확인, images_dir = "img", @include prefixed-properties, box-sizing(content-box), opacity 출력, compass 테스트, * also accepts "all" or "none", input, textarea, 수정대상=원본파일, @include body-a;, nested-reset, compass compile

강의목록 다운로드 1:1 강의 질문&답변

웹표준 [입문 + 고급]

💬

알지오 학습·수강 도우미

운영진이 확인한 안내를 자세히 보고, 필요하면 바로 상담하세요.

상담 상태 확인 중