'코딩' 태그의 글 목록 (22 Page)

[html] 타이틀 코딩하기

안녕하세요. 플입니다. 오늘은 포트폴리오 서브페이지 타이틀을 코딩을 해보겠습니다. 1. 전체 디자인 확인하기 우선 시안을 보고 전체 디자인을 확인합니다. 제 시안을 살펴보면 세 가지 특징을 알 수 있습니다. 첫 번째, 전체적으로 가운데 정렬이다. 두 번째, 큰 제목과 소제목이 있다. 세 번째, 배경이 있다. 기본 틀이 되는 html은 논리적으로 코딩하는 것이 중요함으로 세가지 특징을 생각하면서 코딩하도록 합니다. 2. 코드 구상하기 구상한 코드를 이미지화해봤습니다. 첫 번째로 배경을 넣어주려면 감싸주는 태그가 필요하겠죠. 간단히 div로 감싸주기로 합니다. 감싸주는 태그는 여러 경우가 있지만 사이즈를 맞춰야 하니 block태그인 것으로 하는 것이 좋습니다. 두 번째로 큰 제목은 서브 페이지의 주제입니다...

coding/html + css · 2019. 10. 28. 07:30

[Java] 따옴표 출력하기

안녕하세요. 플입니다. 오늘은 자바에서 따옴표를 출력해보겠습니다. *이 포스팅은 이클립스에서 코딩하는 것을 기본으로 합니다. 1. 실행 화면 확인 만약에 따옴표를 실행했을 때에도 출력하려면 어떻게 하는 게 좋을까요? 일단 평소처럼 작성하고 실행해봤습니다. 따옴표가 없이 출력되는 걸 알 수 있습니다. 2. 역슬래시 활용 이런 경우에는 역슬래시를 활용해줍니다. 역슬래시 + 출력할 문자를 입력하면 역슬래시 바로 뒤의 문자는 실행 시에 그대로 출력됩니다. 실행해보면 이번에는 따옴표가 출력된 것을 알 수 있습니다. 따옴표는 문자, 즉 String을 의미하여서 따옴표만 적는다면 에러가 발생할 수 있습니다. 역슬래시를 이용해 명령어가 아닌 출력을 위한 문자인 것을 알려주는 것입니다. System.out.println..

coding/JAVA · 2019. 10. 23. 07:30

[Java] 줄바꿈 하기

안녕하세요. 플입니다. 오늘은 자바에서 줄 바꿈을 해보겠습니다. *이 포스팅에서는 이클립스를 사용합니다. 1. 엔터로 줄바꿈 우선 엔터로 줄바꿈을 했을 때는 어떻게 변하는지 살펴보겠습니다. 단어 사이에서 엔터를 누르자마자 단어가 단락이 나뉘면서 +로 연결이 자동으로 됩니다. ""(큰따옴표)로 두 단어를 감싸고 +로 연결이 됩니다. 코드상으로는 줄 바꿈이 되었는데 과연 실행을했을 때도 줄바꿈이 될까? 실행을 해보면 줄바꿈이 되지 않고 실행되는 걸 알 수 있습니다. 2. 역슬래시 + n 역슬래시 + n은 자바에서 단락을 나누는 코드입니다. html에서 과 같은 역할을 하는 친구죠. 단락을 나누고 싶은 곳 앞에 적어줍니다. 실행을 해보면 처음에 엔터를 사용해서 단락을 나눴을 때와 달리 단락이 달라진 걸 알 수..

coding/JAVA · 2019. 10. 21. 07:30

[Node.js] 작업 확인하기

안녕하세요. 플입니다. 오늘은 nodejs에서 작업한 것을 확인하는 법을 알아보겠습니다. 1. localhost 이 경우는 웹 서버에 올리지 않고 개인 pc에 있는 상태에서 확인하는 방법입니다. 개인 pc에 있다면 주소창에 localhost라고 입력해줍니다. localhost는 자신의 pc에 있는 파일을 웹브라우저에 불러올 때 사용하는 주소입니다. 2. 주소 입력 위의 이미지처럼 숫자를 적어두는데요 저 숫자와 동일하게 적어줍니다. 합쳐서 localhost:3000이라고 적어줍니다. 주소로 이동하면 이렇게 작업한 페이지가 뜨게 됩니다. 이렇게 웹서버에 올리지 않고 작업 파일을 확인할 수 있습니다. 그럼 이만. 총총.

coding/JavaScript · 2019. 9. 27. 18:30

[css] position을 이용해 반투명 배경 올리기

안녕하세요. 플입니다. 오늘은 position 활용법을 알아보겠습니다. position을 이용해 포토샵의 레이어처럼 층을 하나 올려 반투명한 배경을 만들어 볼 것입니다. 이런 식으로 이미지 위에 단색이지만 약간 투명도가 있어 밑의 이미지가 보이는 모습을 만들 것입니다. 1. 기본 재료 준비 기본적으로 html에서 이미지와 위에 올릴 요소 한 가지가 있어야 합니다. 제 코드는 이런 식으로 되어있습니다. 태그에 배경을 주어서 위로 올려줄 예정입니다. 2. position position:relative; 우선 relative를 이용해 레이어처럼 층을 만들어줍니다. relative란 '관련 있는'이라는 영어단어로 position값을 준 요소의 부모 태그와 관련이 있다고 생각하면 쉽습니다. 위치가 부모 태그의 ..

coding/html + css · 2019. 9. 26. 07:30

코딩 121