퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준

퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준

(22개의 수강평)

903명의 수강생
44,000원
지식공유자 · Dongho Lee
84회 수업· 총 40시간 41분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 입문
bi9choi 프로필

2020년인 지금도 float과 position을 많이 사용하나요? bi9choi 2시간 전

최근 html이나 css강의를보면 float과 position보다는
flex와 grid를 많이 사용하는 것 같습니다.
flex와 grid가 최신기법이 맞나용.? 

1
js0128.kang 프로필

width없이 가운데 위치 지정할 때 js0128.kang 7일 전

텍스트 넘치는건 어떻게 해결하나요?

2
andrewlee 프로필

질문입니다. andrewlee 10일 전

안녕하세요 강사님. 완강을 하였지만 복습을 하면서 궁금한 점이 생겨서 질문을 올리게 되었습니다. 

수업을 다 듣고 복습도 어느정도 해보고나서 제가 든 생각은 

css야 꾸미는 것이니 결과와 보이는 것이 가장 중요하다고 생각이 듭니다.

하지만 html은 시맨틱하게 잘 구조화 하는 것과 나중의 JS로 관리하게 편하게 작성하는 것이 중요한 점이 아닌 가 싶네요.

아 그러면 이런 시맨틱 마크업 역량을 어떻게 개발해야 하는가 고민을 하다가 잘 만들어진 웹 사이트를 잘 공부해보면 되겠다 싶어서

다음이나 네이버의 웹 HTML을 조금 살펴보았습니다. 그런데 조금 놀란 부분은 강사님께서 수업시간에 말씀해주셨던 그런 

시맨틱적 디테일을 찾아보기가 많이 어려웠던 점 입니다.

네이버 메인 창만 봐도 탭키를 눌르면 엉뚱한 기능이 가장 먼저 잡히고, 특히나 alt 속성이라던가 html5 문법이라든지 이런 것들이 보이질 않네요. 저는 굉장히 잘 구조화 된 하나의 예술작품과 같은 정교한 설계를 보며 감탄할 것을 기대했는데 조금 실망스럽기도해서요. 

음.. 표준과 실무는 별개인 것인지 아니면 제가 미쳐 모르는 부분이 있는건지 강사님 의견을 듣고 싶네요. 

2
김건우 프로필

필요없는 내용을 날려버릴때 김건우 11일 전

예를들어 

legend {display: block; position: absolute; left:0; top: -9999em; overflow: hidden}

이렇게 날려버리는 방법과 

caption {display: none}

이렇게 안보이게 하는 방법이 있던데 

보기에는 그냥 display:none하면 편리한데 위의 예처럼 -9999em으로 날려버리는건 왜 인가요 ? 

1
kimsunnn3 프로필

css +요소 질문드립니다. kimsunnn3 13일 전

안녕하세요 css style에서 +값을 줄 경우 li +li는 두번째 li부터 다른 li까지 다 해당되는데 h1+p는 왜 그 이후부터 다 해당되는게 아니고 h1과 인접한 하나의 p만 해당되는건가요?

1
이고은 프로필

display: none 과 클래스 blind 이고은 19일 전

강사님 안녕하세요 :)

좋은 강의, 항상 감사드립니다.

다름아니라 웹 모바일 페이지 실습하면서

display: none으로 화면에서 가리는 방법과

클래스 blind로 position 처리해서 가리는 방법을

번갈아 가며 쓰시는거 같은데 혹시 이유가 있을까요?

2
kate 프로필

코딩 파일을 첨부해주세요. kate 24일 전

안녕하세요.

강의자료 파일이 안보이는데

코딩 파일을 첨부해 주셨으면 합니다.

1
이고은 프로필

hover시 문제 발생 이고은 28일 전

안녕하세요 선생님!

지금 실습예제 보면서 혼자 메인메뉴를 만들어보고 있는데요,

메뉴를 float: left로 나열하고 hoverfont-weight: bold를 적용시키니

오버 할 때마다 조금조금씩 자리가 밀려나서 전체 메뉴의 위치가 이동을 하더라구요 !

transition font-size 적용해도 그렇구요 ㅜㅜ

혹시 이 점에 있어서 해결방안이 있을까요?

https://blog.naver.com/dlrhdms08/221838270814. (문제 영상 링크 입니다.)

항상 감사합니다 :)

1
이은지 프로필

li들이 사진뒤로 숨어요ㅠㅠ 이은지 29일 전

상단 메뉴들이 이미지 뒤로 나타나서

스크롤을 밑으로 내리면 사진 뒤에서 나타납니다...

강의 들으면서 그대로 따라한다고 따라하고

틀린게 있나 싶어서 강사님께서 올리신 파일과 비교해보았는데

어디서 틀렸는지 모르겠네요ㅠㅠ 

position 때문에 꼬인건지,, z-index때문에 꼬인건지

모르겠습니다,,,

1
andrewlee 프로필

포토샵 관련기능 andrewlee 1달 전

강의와 무관한듯 관련있는 질문입니다....

깅의 도중에 이 기능들을 즐겨 쓰시는 것 같은데 아주 효과적인 기능인 것 같은데...(아 포토샵은 2019 버젼 설치를 했습니다.) 어떻게 찾아서 배워야 할지 몰라 질문을 합니다. 

포토샵의 어떤 기능 인지 구글에 어떻게 검색해야 배울 수 있을지 좀 알 수 있을까요?? 

감사합니다.

1
andrewlee 프로필

강의 : list - 이미지 하단에 텍스트가 있는 목록 2 andrewlee 1달 전

코드 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*디자인을 할 때는 큰 그림을 기준으로 우리가 판단을 합니다.*/
		/*reset*/
		*{margin: 0; padding: 0}
		html,body{width: 100%; height: 100%; } 
		body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
		body,input,textarea,select,button,table{font-family:'돋움',Dotum,AppleGothic,sans-serif;font-size:12px}
		img,fieldset{border:0}
		img{
			vertical-align: top;
		}
		
		ul,ol{list-style: none}
		em,address{font-style: normal}
		a{text-decoration: none}
		a:hover,a:active,a:focus{text-decoration: underline;}

		/*style*/
		.lst_app{
			width: 800px;
			margin: 0 auto;
			border : 1px solid #aaa;

			/*float 해지를 잊지마 이름을 기억해 */
			
			*zoom =1;
		}

		.lst_app:after{
			content: '';
			display: block;
			clear: both;
		}

		.lst_app li{
			float: left;
			padding: 10px 10px;
			width: 180px;

		}
		.lst_app  li .thmb{
			height : 180px;
			background: url(img/bg_thmb.gif) no-repeat;
		}
		.lst_app  li .btn_area{
			padding: 15px 0;
			/*링크 걸려있는 공간이 인라인 요소잖아요. 그래서 text-align:만 지정을 해도 정렬이 됩니다.*/
			text-align: center;
		}
		.lst_app  li .btn_area .edit{}
		.lst_app  li .btn_area .delete{}

	</style>
</head>
<body>
	<div id="content">
			<!-- UI Object -->
		<ul class="lst_app">
			<li>
			    <div class="thmb">
			    	<a href="#">
			    		<img src="img/@tmp_thmb.gif" alt="팡야">
			    	</a>
			    </div>
			    <div class="btn_area">
			        <a href="#" class="edit">
			        	<img src="img/btn_edt.gif" alt="수정">
			        </a>
			        <a href="#" class="delete">
			        	<img src="img/btn_del.gif"  alt="삭제">
			        </a>
			    </div>
			</li>
			<li>
			    <div class="thmb">
			    	<a href="#">
			    		<img src="img/@tmp_thmb.gif" alt="팡야">
			    	</a>
			    </div>
			    <div class="btn_area">
			        <a href="#" class="edit">
			        	<img src="img/btn_edt.gif" alt="수정">
			        </a>
			        <a href="#" class="delete">
			        	<img src="img/btn_del.gif"  alt="삭제">
			        </a>
			    </div>
			</li>
			<li>
			    <div class="thmb">
			    	<a href="#">
			    		<img src="img/@tmp_thmb.gif" alt="팡야">
			    	</a>
			    </div>
			    <div class="btn_area">
			        <a href="#" class="edit">
			        	<img src="img/btn_edt.gif" alt="수정">
			        </a>
			        <a href="#" class="delete">
			        	<img src="img/btn_del.gif"  alt="삭제">
			        </a>
			    </div>
			</li>
			<li>
			    <div class="thmb">
			    	
			    </div>
			    <div class="btn_area"><a href="#"><img src="img/btn_upld_img.gif" width="80" height="22" alt="이미지 올리기"></a></div>
			</li>
			<li>
			    <div class="thmb"></div>
			    <div class="btn_area"><a href="#"><img src="img/btn_upld_img.gif" width="80" height="22" alt="이미지 올리기"></a></div>
			</li>
			<li>
			    <div class="thmb"></div>
			    <div class="btn_area"><a href="#"><img src="img/btn_upld_img.gif" width="80" height="22" alt="이미지 올리기"></a></div>
			</li>
		</ul>
			<!-- //UI Object -->
	</div>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquam eligendi rerum placeat vel quam facere, adipisci, deserunt rem aliquid eaque! Commodi eos dolor consequatur quia vel quasi, error iure, modi officiis repellendus temporibus sint maxime animi esse fugiat, aperiam vitae quidem voluptas, sunt voluptatem. Quae non perspiciatis cum, iste officia. Possimus mollitia, fuga ipsam odio corporis repellendus voluptatibus amet obcaecati ab magni nemo id dolorem eveniet quod quia maiores consequatur! Soluta vel commodi voluptatum culpa aspernatur cum ipsa reprehenderit eius numquam repellendus eligendi suscipit, ullam fugiat nostrum similique voluptas, quos esse. Praesentium inventore enim obcaecati nisi. Nesciunt, voluptatum, ducimus.
	</p>
</body>
</html>

결과창

질문 

강의를 잘 따라가서 목표한 페이지를 구현했습니다.

그런데 다 만들고 확인 과정을 거치던 중 버튼 사이에 이상한 줄이 생겼다 사라졌다 하는 것을 발견했습니다. 

코드는 문제가 없어 보이는 데 이건 무슨 현상인가요?? 

좋은 강의 해주셔서 항상 감사드립니다. 

2
먹는샘물 프로필

여백제거..ㅠㅠ 먹는샘물 1달 전

안녕하세요 선생님. 좋은강좌 감사합니다.

덕분에 포트폴리오도 독학으로 도전해서 코딩하는 중입니다

이미지처럼 내용을 적으면 여백이 생기는데 이걸 어떻게 해야할까요?

강의는 얼추 다 들었는데.. 이런 비슷한 내용을 알려주신 강의가 생각이 안나네요ㅠㅠ 

폰트크기를 70~80px로 키우면 티가 확 나서..어떻게 해야할지 고민입니다

참고로 저는 지금 fullpage.js를 사용해서 포폴을 만들고있습니다.. (css도 겨우땐 초짜지만 유튜브 따라보면서 하고있습니다ㅠ)

2
andrewlee 프로필

menu 탭메뉴,메뉴 1 (22:41) andrewlee 1달 전

코드 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*reset*/
		html,body{width: 100%; height: 100%; } 
		body,input,textarea,select,button,table {font-family: 'Malgun Gothic','돋움',Dotum,AppleGothic;font-size: 12px} 
		img, fieldset{border: 0 }
		ul,ol{list-style: none}
		em,address{font-style: normal}
		a{text-decoration: none}
		a:hover,a:active,a:focus{text-decoration: underline;}

		/*style*/
		/*js로 할 것을 css로 무리하게 하면은 cross-browsing에 문제가 생긴다고 알려져 있다. */
		.wrap{
			width: 960px;
			border: 1px solid red;
			margin: 0 auto;
		}
		.tab_list li.m1 > a{ /* 만일 ie6을 고려하지 않는다면 자식 선택자도 가능한 선택지 이다. */
			color: red;
		} 
		.tab_list{
			/* 메뉴 바를 보면 위치는 달라지지 않고 고정되어 있으니까 li보다는 .tab_list나 ul이 낫다 */
			position: relative;
		}
		.tab_list li.m1,
		.tab_list li.m2,
		.tab_list li.m3{
		}

		/*이렇게 해야 메인 버튼을 먼저 디자인 할 수 있겠죠. */
		.tab_list li.m1 > a,
		.tab_list li.m2 > a,
		.tab_list li.m3 > a{
			/*메인 메뉴들을 display하는 방식에 float을 하려는 데 그게 이치에 안맞는다 그 이유로는 밑에 li까지 딸려있으니까 그렇다. 그래서 >a로서 메뉴만 잡아주는 형태를 잡는다.*/
			float: left;
			display: block; /*왜냐면 하나씩 블록을 가져서 넘어가야 하기 때문입니다. 또한 크기도 만들 수 있으니까.*/
			/*height: 35px ; */
			padding: 0 30px; 
			background-color: #eee;
			border: 1px solid #ddd;
			color : #666;
			font-size: 13px;
			line-height: 35px; /*높이라고 생각해도됨.*/
		}

		.tab_list li.m1 ul,
		.tab_list li.m2 ul,
		.tab_list li.m3 ul{

			position: absolute; 	
			left:0;
			top:36px;
			width:100%;
			border-top: 1px solid #aaa 

			/* absolute가 원래 처리를 하면 내용까지만 처리가 됩니다. 그럴 때에는 크기를 지정하면 됩니다. 픽셀보다는 %로 바깥에 무언가 있을 때 채워지도록 합니다. */
		}

		.tab_list li.m1 .more,
		.tab_list li.m2 .more,
		.tab_list li.m3 .more{
			position: absolute;
			right: 0;
			top: 0;
		}
		
		
	</style>
</head>
<body>
	<div class="wrap">
		<div class="tab_list">
			<ul>
				<li class="m1">
					<a href="#"><span>공지사항</span></a>
					<ul>
					<li><!-- ›  요즘에는 이렇게 안쓰고 아이콘을 넣음--><a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a></li>
					<li><a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a></li>
					<li><a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a></li>
					</ul>
					<p class="more"><a href="#">공지사항 더보기</a></p> <!-- 성격이 다르니까 빼주는 것이 좋겠죠 -->
				</li>
				<li class="m2">
					<a href="#"><span>보도자료</span></a>
					<ul>
					<li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a></li>
					<li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a></li>
					<li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a></li>
					<li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a></li>
					</ul>
					<p class="more"><a href="#">보도자료 더보기</a></p>
				</li>
				<li class="m3">
					<a href="#"><span>해명자료</span></a>
					<ul>
					<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li>
					<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li>
					<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li>
					<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li>
					<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li>
					</ul>
					<p class="more"><a href="#">해명자료 더보기</a></p>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

결과창

질문 

강의 도중에 border-top을 이용해 라인을 처리하는 부분이 있는데 꽤나 오래 고민 해봤는데 해결을 못해서 질문합니다. 계속해서 결과창의 보라색과 같은 남는 선이 생깁니다. 

어떻게 해결해야 할까요??

저의 코드를 수정한 코드를 보여주신다면 정말 감사하겠습니다. 

2
이고은 프로필

레이아웃 실습 질문 이고은 1달 전

안녕하세요 선생님!

매번 질문에 답변 주셔서 감사드립니다 :) 덕분에 많은 도움이 됩니다!

다름아니라 실습 강의 예제 듣고 나서 혼자서 레이아웃 잡는 연습을 하고 있는데요,

혹시 첨부한 사진과 같은, 각각 다른 column의 background를 동일하게 맞추고 싶다면,

어떤 속성이 있을까요? (단, 글씨의 양에 따라, 혹은 브라우저의 크기에 따라 플렉시블한 height를 원합니다.)

감사합니다.

2
andrewlee 프로필

질문 andrewlee 1달 전

안녕하세요 강사님.

강의를 너무 잘 듣고 있습니다.

좋은 내용을 좋은 강의력으로 전달해주셔서 너무 유익하게 듣고 있는데 

제가 배운 것을 가장 잘 익히는 방법이 남에게 설명할 수 있는 것이라고 생각이 들어 

요즘 블로그 운영을 생각하고 있습니다.

강의를 진행하시는 흐름이나 하시는 말씀들이 참 좋았던 부분이 많아서 이 부분들을 저만의 방식으로 정리해서 

블로그에 조금씩 올려보고 싶은데, 이 것에 대해서 제가 원 창작자인 강사님의 의견을 듣고 실례가 되지 않는 선에서 

진행해보고 싶습니다. 제가 강의내용 흐름을 블로그에 글로써 올려도 괜찮을까요? 

감사합니다.

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스