'Web Publishing' 카테고리의 글 목록

Web Publishing

AI 시대에 웹개발자로 취업하려면? 기초가 답이다! 2025.07.09 3
모바일 기기 감지하는 4가지 방법 2019.06.25
flex(플렉스) layout을 이용한 푸터 하단 고정 배치하기 2019.06.24
다음 daum Map API 활용하기 2019.04.29
네이버 맵 API 사용하기 2019.04.29

🚀 AI 도구가 넘쳐나는 시대, 왜 기초부터 시작해야 할까?

ChatGPT, Claude, GitHub Copilot... AI 도구들이 코드를 척척 만들어주는 시대입니다. 그런데 역설적으로, 지금이야말로 HTML, CSS, JavaScript 기초가 더욱 중요해진 시점입니다.

💡 현실적인 이유들

1. AI가 만든 코드를 이해하고 수정할 수 있어야 한다

AI가 생성한 코드에 버그가 있을 때 디버깅 능력
요구사항에 맞게 코드를 커스터마이징하는 능력
성능 최적화와 리팩토링 능력

2. 면접에서 기초 지식은 필수다

기술 면접에서 "이 코드가 왜 작동하는지" 설명 요구
브라우저 렌더링 원리, 이벤트 루프 등 핵심 개념 질문
실무에서 발생하는 문제 해결 능력 검증

3. AI와 협업하는 능력이 새로운 경쟁력

정확한 프롬프트 작성을 위한 기술적 이해
AI 출력물의 품질을 판단하는 안목
효율적인 개발 워크플로우 구축

📚 6개월 학습 로드맵

1-2개월: 탄탄한 기초 다지기

HTML/CSS 마스터하기

시맨틱 HTML과 웹 접근성
CSS Grid, Flexbox 완전 정복
반응형 웹 디자인 원리

JavaScript 핵심 개념

변수, 함수, 스코프, 클로저
DOM 조작과 이벤트 처리
비동기 프로그래밍 (Promise, async/await)

3-4개월: 실전 프로젝트 + AI 도구 활용

프레임워크 학습

React 또는 Vue.js 기본기
상태 관리와 컴포넌트 설계

AI 도구와 함께하는 개발

GitHub Copilot으로 생산성 향상
ChatGPT/Claude를 활용한 코드 리뷰
효과적인 프롬프트 엔지니어링

5-6개월: 포트폴리오 완성 + 취업 준비

실무 수준 프로젝트

백엔드 연동 (API 통신)
테스트 코드 작성
배포 및 CI/CD 구축

취업 준비

기술 면접 대비
포트폴리오 최적화
기업별 맞춤 지원

🎯 AI 시대 웹개발자의 핵심 역량

기술적 역량

기초 탄탄함: HTML, CSS, JS의 동작 원리 이해
AI 활용 능력: 도구를 효과적으로 사용하는 스킬
문제 해결 능력: 복잡한 요구사항을 단계별로 분해

소프트 스킬

지속적 학습: 빠르게 변화하는 기술 트렌드 적응
커뮤니케이션: 기획자, 디자이너와의 협업 능력
비판적 사고: AI 출력물의 품질을 판단하는 안목

🔥 성공하는 사람들의 공통점

1. 기초를 소홀히 하지 않는다

"AI가 다 해주니까 기초는 안 해도 돼" → ❌ 오산입니다

실제 개발 현장에서는:

복잡한 비즈니스 로직 구현
성능 최적화 필요
레거시 코드 유지보수

이 모든 것이 기초 지식 없이는 불가능합니다.

2. AI를 도구로 활용한다

AI에게 모든 것을 맡기는 것이 아니라, 협업 파트너로 활용합니다.

효과적인 AI 활용법:

반복적인 코드 작성 자동화
코드 리뷰와 최적화 제안
새로운 기술 학습 가속화

3. 꾸준한 실전 경험을 쌓는다

이론만으로는 부족합니다. 실제 프로젝트를 통한 경험이 중요합니다.

💼 취업 시장의 현실

기업이 원하는 인재

기초가 탄탄한 개발자: 문제 해결 능력
AI 도구 활용 능력: 생산성 향상
지속적 학습 능력: 변화 적응력

연봉 현황

신입 개발자: 3,000만원 ~ 4,500만원
경력 1-3년: 4,500만원 ~ 6,000만원
AI 활용 능력 보유시: 평균 20% 이상 연봉 상승

🎓 6개월 후 당신의 모습

기술적 성장

HTML, CSS, JavaScript 완전 이해
React/Vue 프레임워크 활용 능력
AI 도구와 함께하는 효율적인 개발

취업 준비 완료

기술 면접 자신감
실무 수준 포트폴리오
기업 맞춤형 지원 전략

장기적 경쟁력

지속적 학습 습관
문제 해결 능력
AI 시대 적응력

🚀 지금 시작하세요!

AI 도구가 발전할수록 기초가 탄탄한 개발자의 가치는 더욱 높아집니다.

6개월 후, 당신은 AI와 협업하며 더 나은 코드를 작성하는 개발자가 될 수 있습니다.

더 늦기 전에 시작하세요. 미래의 당신이 감사할 결정입니다.

"AI 시대의 웹개발자는 AI를 두려워하지 않고, AI와 함께 성장하는 사람입니다."

과정명: 프로젝트기반 프론트엔드 개발자 양성(Figma/React/Next.js/PHP/Mysql/chatGPT)
강사: 김동주
전화문의 : 02-722-2111

상단신청: https://forms.gle/YwtKpx7ooJ2c5HxE7

모바일 기기 감지하는 4가지 방법

2019. 6. 25. 17:26

1. jQuery 라이브러리 활용 방법

http://detectmobilebrowsers.com/ 에서 모바일 기기를 감지하고 소스를 다운받는다.

사이트에 접속하여 jquery 버튼을 클릭하여 소스를 다운로드 한다.

jQuery 소스를 다운받고 아래와 같이 작성해본다.

<!DOCTYPE html>
<html>
<body>

<h1>Mobile test</h1>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="detectmobilebrowser.js"></script>
<script>
 console.log(jQuery.browser.mobile);
 alert(jQuery.browser.mobile);
</script>

</body>
</html>

해당 파일을 저장하고 브라우저에서 콘솔화면을 확인하면 false가 나오고 경고창으로 아래와 같이 나온다.

호스팅 서버에 올리고 모바일 기기에서 확인해보면 아래와 같이 true로 값이 경고창으로 나온다.

if 조건문을 작성하여 jQuery.browser.mobile 의 값이 true 일때와 false 일때 효과등을 다르게 작성할 수 있게 되겠다.

그러면 아래와 같이 모바일 기기일때 나타날 요소를 구분할 수 있겠다.

<script>
 //console.log(jQuery.browser.mobile);
 //alert(jQuery.browser.mobile);
  if(jQuery.browser.mobile == true){
		$('.pc').css({display:'none'});
  } else {
		$('.mobile').css({display:'none'});
  }
</script>

또는 모바일 기기로 접속했다면 별도의 모바일 전용 페이지로 이동시킬수도 있다.

<script>

  if(jQuery.browser.mobile == true){
		location.href="./mobile/";
  } 
</script>

참고로 디렉토리 구조는 아래와 같다.

2. javascript - userAgent 방식

javascript에서 브라우저(userAgent)를 구분하는 방식을 이용하여 아래와 같이 작성하여 모바일이라면 특정 폴더 및 파일로 연결할 수 있다.

/**
* 모바일 페이지 강제 이동
*/
//Mobile여부를 구분하기 위함
var uAgent = navigator.userAgent.toLowerCase();
// 아래는 모바일 장치들의 모바일 페이지 접속을위한 스크립트
var mobilePhones = new Array('iphone', 'ipod', 'ipad', 'android', 'blackberry', 'windows ce','nokia', 'webos', 'opera mini', 'sonyericsson', 'opera mobi', 'iemobile');
for (var i = 0; i < mobilePhones.length; i++){
  if (uAgent.indexOf(mobilePhones[i]) != -1){
    location.href="/mobile/home/main.do";
  }
};

3. Modernizr 활용하기

https://modernizr.com/

Modernizr: the feature detection library for HTML5/CSS3

What is Modernizr? It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user.

modernizr.com

브라우저에서 어떤 기능들을 지원하고 지원하지 못하는지 구분하여 html 최상단에 class명으로 구분하여 주는 modernizr를 활용하여 모바일 기기를 구분할 수 있다. 특히 속성중. touch 이벤트의 지원 여부를 구분하면 된다.

CSS
.no-touchevents .box { color: red; }
.touchevents .box { color: green; }


JS
if (Modernizr.touchevents) {
  // supported
} else {
  // not-supported
}

지원하지 않는 다면 클래스명 .no-touchevents라는 이름이 html 태그에 추가되어 구분할 수 있게 도와준다.

스크립트로는 Modernizr.touchevents의 값이 true, flase일때 구분하여 스크립트를 작성하면 된다.

모더나이저를 사용하기 위해서는 html에서 script 소스를 아래와 같이 로드해야 한다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js" integrity="sha256-ffw+9zwShMev88XNrDgS0hLIuJkDfXhgyLogod77mn8=" crossorigin="anonymous"></script>

4. vanila javascript - window.devicePixelRatio

순수한 자바스크립트를 이용하여 구분하는 방법으로 기기의 픽셀 레티오로 모바일 기기를 구분할 수 있다. 모바일 기기들은 pc와 다르게 작은 화면에 2배 또는 4배의 픽셀을 담고 있다.

각 디바이스의 픽셀 레티오는 아래 사이트를 참고한다.

http://troy.labs.daum.net/

불러오는 중입니다...

스크립트에서 아래와 같이 입력하여 pixel ratio가 2이상이면 즉 모바일 기기이면 다른 효과 및 페이지 이동을 할 수 있게 된다.

	var ratio = window.devicePixelRatio;
	
	if(ratio > 1){
		window.location.href = 'mobile-home.html';
	}

'Web Publishing > HTML&CSS' 카테고리의 다른 글

flex(플렉스) layout을 이용한 푸터 하단 고정 배치하기 (0)	2019.06.24
다음 daum Map API 활용하기 (0)	2019.04.29
네이버 맵 API 사용하기 (0)	2019.04.29

flex(플렉스) layout을 이용한 푸터 하단 고정 배치하기

2019. 6. 24. 17:40

footer를 하단으로 고정하는 이유는 컨텐츠의 내용이 많이 않은 경우 푸터가 콘텐츠하단으로 올라와서 아래 부분이 휑하게 비어 보기가 안 좋기 때문이다.

이름 막기위해서 플렉스의 크기가 만들어지는 특성을 이해하면 쉽게 구현할 수 있다.

[HTML 구조]

<div class="wrapper">
	<header>header</header>
	<div class="main-content">main content</div>
	<footer>footer</footer>
</div>

[ CSS ]

html,body{
	margin:0; padding:0;
	width:100%; height:100%
}

일단 중요한 것은 HTML, BODY가 화면의 높이를 모두 사용하고 있어야 한다는 것이다.

HTML에서 WRAPPER의 높이를 아무리 100%를 주어도 WRAPPER의 부모인 HTML, BODY의 높이가 없으면 화면 높이를 모두 사용하지 못하게 된다. 이때 위와 같이 html, body에 height를 100%를 주면 클래스명 wrapper에서 height를 100%로 하면 높이를 브라우저 화면 높이를 모두 사용한다. 만약 html, body에 높이를 주지 않고 하고 싶다면 아래와 같이 wrapper에서 height를 화면(viewport)의 단위인 100vh를 사용하면 된다.

[ CSS ]

.wrapper{
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.wrapper가 화면을 모두 사용하고 .wrapper안의 첫번째 요소들 즉, header, div, footer 요소들의 정렬을 주축의 방향을 세로로 하는 방식 즉 가로가 아닌 세로로 배열이 되도록 한다.

flex-direction:row(기본값) => 기본값, 박스를 왼쪽에서 오른쪽을 배치, 주축은 가로, 교차축은 세로가 된다.

flex-direction:column => 박스를 위에서 아래로 배치. 주축은 세로 교차축은 가로가 된다. (위 그림을 90도 회전한 것이라 생각하면 된다.)

[ CSS ]

.main-content{
	flex: 1;
}

footer{
	height:60px;
	background: #333;
	color:#fff;
}

핵심은 가운데 영역인 main-content 부분의 크기를 넘치는 속성을 줄이는 속성1, 모자른 속성을 채우는 속성1, 해당 속성을 유지하는 속성 0, flex: 1 1 0을 준다. 줄여서 flex : 1이라고만 하면 된다.

그러면 가운데 영역이 헤더와 푸터를 제외한 나머지 공간을 모두 사용하게되어 결국 푸터가 하단으로 밀리게 된다.

[ 완성본 ]

See the Pen fixed footer v2 - flexbox by Alikerock (@alikerock) on CodePen.

'Web Publishing > HTML&CSS' 카테고리의 다른 글

모바일 기기 감지하는 4가지 방법 (0)	2019.06.25
다음 daum Map API 활용하기 (0)	2019.04.29
네이버 맵 API 사용하기 (0)	2019.04.29

다음 daum Map API 활용하기

2019. 4. 29. 16:14

카카오 개발자 주소.

https://developers.kakao.com/

가이드

http://apis.map.daum.net/web/guide/

카카오 맵사용을 위해서는 api key를 발급 받아야 합니다.

1. 카카오 개발자사이트 (https://developers.kakao.com) 접속

2. 개발자 등록 및 앱 생성

3. 웹 플랫폼 추가: 앱 선택 – [설정] – [일반] – [플랫폼 추가] – 웹 선택 후 추가

4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080)

5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다.

카카오 개발자 사이트에서는 아래와 같이 다양한 API를 제공하는데 일단 지도 API를 사용해 보고자 한다.

01. 개발자 계정 만들기

카카오 계정으로 로그인 한다.

02. 앱 만들기

구분할 수 있는 이름을 입력하고 ‘앱 만들기’를 클릭하고 구분할 수 있는 이름을 입력합니다.

앱 아이콘 확인

별도의 아이콘등으로 수정하지 않아도 되면 ‘계속 진행’ 한다.

03. 플랫폼 설정하기
앱정보 설정에서 지도를 사용하려는 플랫폼을 설정합니다.

플랫폼 추가를 클릭하고 웹을 선택한후 사이트 도메인에 주소를 입력합니다.

사용하려는 Javascript 키를 복사해 놓습니다.

04. 샘플에서 지도 선택하기

http://apis.map.daum.net/web/sample/

샘플에클릭하고 원하는 형식의 지도를 선택합니다.

지도로 이동후 샘플을 클릭하여 다음에서 제공하는 지도 샘플을 확인합니다.

기본적인 지도 사용은 지도생성하기를 클릭하면 확인할 수 있습니다.

05. 선택한 샘플에서 API KEY 입력하기

모든 샘플마다 javascript와 html를 제공함으로 원하는 형식의 코드를 사용합니다.

샘플을 선택했으면 샘플 코드에서 발급받은 키를 입력합니다.

06. 다음지도를 원하는 위치로 설정하기

특정위치로 설정하기 위해서는 위도와 경도를 입력해야 합니다.

http://map.google.com 에서 구글맵을 사용하여 위치를 검색합니다. 예제로 신촌역을 검색했습니다.

상단 주소에 위도와 경도가 나오는 것을 확인하고 복사합니다.

또는 검색후 아이콘에서 마우스 우클릭후 이곳이 궁금한가요?를 클릭하면 하단에 위도와 경도를 출력해줍니다.

찾아낸 위도와 경도를 지도의 중심좌표부분에 입력합니다.

입력후의 다음 지도의 화면입니다.

07. 다음 맵의 표현 > 특정위치에 인포창 표시하기

http://apis.map.daum.net/web/sample/markerWithInfoWindow/

Daum 지도 API

Daum 지도 API를 이용해보세요. 다양한 샘플과 상세한 매뉴얼로 개발자분들의 시간을 아껴드리겠습니다!

apis.map.daum.net

sample page 코드 복사후 예제 파일에 붙여넣고 인포윈도우에 표출될 내용부부분에 원하는 HTML코드를 추가합니다.

FPT에 업로드하고 주소를 접속해본다.

08. 다음 맵의 표현 > 기본 컨트롤 보이기

http://apis.map.daum.net/web/sample/addMapControl/

마찬가지 소스를 복사하고 api 코드와 좌표를 적용하면 웹페이제엇 확인할 수 있다.

'Web Publishing > HTML&CSS' 카테고리의 다른 글

모바일 기기 감지하는 4가지 방법 (0)	2019.06.25
flex(플렉스) layout을 이용한 푸터 하단 고정 배치하기 (0)	2019.06.24
네이버 맵 API 사용하기 (0)	2019.04.29

네이버 맵 API 사용하기

2019. 4. 29. 16:03

API(Application Programming Interface)

응용 프로그램 프로그래밍 인터페이스

응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스

웹 API

웹 애플리케이션 개발에서 다른 서비스에 요청을 보내고 응답을 받기 위해 정의된 명세

예), 블로그 API, 우체국의 우편번호 API, 구글과 네이버의 지도 API, 카카오 스토리

홈페이지 구축이나 추가개편 시 따로 추가로 개발하지 않고 이런 오픈 api를 가져와 사용하는 추세

2018년 11월 13일부로 이전의 API 키호출 방식의 네이버 Map 서비스는 종료

네이버 클라우드 플랫폼 > Enterprise API 출시일 : 2018년 11월 13일

플랫폼 : 개발자센터 -> 네이버 클라우드 플랫폼(https://www.ncloud.com/)에서 신규 계정을 발급받아 지도 Enterprise API 사용 가능

NAVER map Api v3

NAVER map Api v3 https://www.ncloud.com

회원가입 > 인증.

제품에서 Maps 선택

이용신청하기

하단에 application 등록 선택

Application 이름 입력

서비스중 원하는 지도 형태 선택

서비스환경에 지도를 사용할 곳의 웹 주소를 입력

등록된 상태 (6,000,000회까지는 무료)

개발가이드 확인하기

왼쪽 메뉴중 Web Dynamic Map 선택 / v3사이트 바로가기 클릭

https://navermaps.github.io/maps.js.ncp/

시작하기 클릭

필요한 코드를 복사한다.

네이버 지도를 로드하기 위한 필수 코드로서 중간에 YOUR_CLIENT_ID 부분이 어플리케이션 등록후에 나오는 코드를 넣는 곳이다.

실제 지도가 나타날 위치
네이버에서 제공하는 지도 예제의 코드 (현재는 기본 좌표와 줌의 정도)

클라이언트 아이디 확인하기

CONSOLE 링크 클릭

1.왼쪽메뉴에서 NAVER API클릭/ 2. 등록한 어플리케이션 인증정보 클릭

클라이언트 id 복사

예제 코드에 붙여넣기

콘솔에서 확인한 클라이언트 코드넣기

개발가이드 바로가기 클릭

Web Dynamic Map V3 사이트 바로가기

예제 모아보기 클릭

정보창 표시하기 예제 선택

서스 코드 복사하기 (모두 복사)

예제코드에 붙여넣기

애플리케이션 등록할 때 입력한 주소에 FTP를 이용하여 업로드하기

웹브라우저에서 등록한 파일의 주소 입력 확인

https://youtu.be/CHgyoAYAnAE

'Web Publishing > HTML&CSS' 카테고리의 다른 글

모바일 기기 감지하는 4가지 방법 (0)	2019.06.25
flex(플렉스) layout을 이용한 푸터 하단 고정 배치하기 (0)	2019.06.24
다음 daum Map API 활용하기 (0)	2019.04.29

PREV 1 NEXT

Rock's Ezweb

Web Publishing

AI 시대에 웹개발자로 취업하려면? 기초가 답이다!

🚀 AI 도구가 넘쳐나는 시대, 왜 기초부터 시작해야 할까?

💡 현실적인 이유들

📚 6개월 학습 로드맵

1-2개월: 탄탄한 기초 다지기

3-4개월: 실전 프로젝트 + AI 도구 활용

5-6개월: 포트폴리오 완성 + 취업 준비

🎯 AI 시대 웹개발자의 핵심 역량

기술적 역량

소프트 스킬

🔥 성공하는 사람들의 공통점

1. 기초를 소홀히 하지 않는다

2. AI를 도구로 활용한다

3. 꾸준한 실전 경험을 쌓는다

💼 취업 시장의 현실

기업이 원하는 인재

연봉 현황

🎓 6개월 후 당신의 모습

기술적 성장

취업 준비 완료

장기적 경쟁력

🚀 지금 시작하세요!

모바일 기기 감지하는 4가지 방법

'Web Publishing > HTML&CSS' 카테고리의 다른 글

flex(플렉스) layout을 이용한 푸터 하단 고정 배치하기

'Web Publishing > HTML&CSS' 카테고리의 다른 글

다음 daum Map API 활용하기

'Web Publishing > HTML&CSS' 카테고리의 다른 글

네이버 맵 API 사용하기

'Web Publishing > HTML&CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바