TIL ( Today I Learn ! ) (10) 썸네일형 리스트형 html image 넣는 법(이미지가 여러 개로 겹쳐보이는 이유) 방법1. image tag를 사용한다. // alt: 사진이 깨진 경우, 마우스를 올리면 나타날 대체어 // 이때 css로 background: url("사진 링크");을 주면 사진이 2겹이 되어버린다. // img tag를 썼다면 background 속성은 사용 X 방법2. background-image css를 사용한다. - html // li나 a tag 등 사진을 넣을 tag를 준비 // a tag를 사용하면 사진을 눌렀을 경우 herf에 지정한 링크로 이동되는 버튼으로 활용 가능 - css /* background-image: 이미지 링크 background-repeat: 이미지의 반복 여부, no-repeat을 해야 width, height 조정했을 때 그림이 여럿 등장하지 않는다. backg.. a tag에 default cilck(강제로 클릭) 이벤트 넣기 HTML의 a tag를 이미 클릭한 상태로 만드는 방법 HTML js(jquery) // html이 켜질 때 작동하는 함수 $(document).ready(function(){ // a tag가 눌렸을 경우 실행할 함수 $(".default_a").click(function(e){ e.preventDefault(); // a tag가 눌려서 지정된 herf 위치로 넘어가는 작동을 막음 // 작동시킬 내용 넣기 }); // a tag를 default로 클릭시키는 함수, 클릭 시 작동될 함수(위에 것) 선언 뒤에 넣어야 함 $(".default_a").trigger() )}; 자바 기초) 문자 input을 받는 방법은? 1. 문자 1개 받기 - 이 코드를 실행하면 문자 여러개를 치고 엔터를 쳐도 System.in 은 한 글자만 받기 때문에 첫 번째 문자 1개만 char ch 에 들어간다. package datastruct_1; import java.io.*; public class Binary_Search { public static void main(String[] args) throws IOException { InputStreamReader input = new InputStreamReader(System.in); System.out.print("입력: "); char ch = (char) input.read(); System.out.print(ch); } } 2. 문자열 1줄 받기 - 엔터키 입력하면 그 전까지 .. HTML 코딩하기! ③ 텍스트와 하이퍼링크 저번 시간에는 기능 없이 가독성을 높이기 위해 body 부분에 사용하는 '시맨틱 태그'를 배워보았습니다! 간단히 복습 겸 정리해보자면, 상단을 표시하는 header, 중간을 표시하는 section, 하단을 표시하는 footer 실제 콘텐츠가 들어가는 article, 기타 추가 내용을 넣는 사이드 부분 aside 이 있었습니다! 이 시맨틱 태그로 구역을 나눴다면 실제로 내용도 넣어보아야겠지요? 그래서 오늘부터는 실제 콘텐츠를 넣을 때 사용하는 태그들을 배워보겠습니다! 일부 태그는 이전 수업에서 이미 배워 본 태그입니다~ 텍스트 태그 일부 태그는 이전에 이미 배운 내용입니다! 1. p 태그 p 태그는 이전에 배웠던 태그로 일반 텍스트를 보여주는 태그입니다. p 태그를 사용하면 텍스트 단락을 만들고, br 태.. HTML 코딩하기! ② 시맨틱태그 1. 주석이란? 코드의 이해를 돕기 위해 만들어진 기능이 없는 추가 설명글 코딩할 때에는 '주석'을 다는 경우가 생깁니다. 일상에서 주석이라 하면 풀이나 뜻 같은 추가 설명을 옆에 달아주는 것을 말하지요? 그거와 똑같습니다! 이해를 돕기위해 쓰는 추가 설명글이지요! 보통 이 코드는 왜 썼는지, 무슨 기능인지 쓰기도 하고 수업을 들을 때에는 필기를 쓰기도 합니다. 주석도 프로그래밍 언어의 요소 중 하나기에 각 언어마다 주석을 쓰는 방법이 다릅니다. 예를 들어 Java 에서는 // 를, python에서는 # 을 한 줄 주석의 표시로 쓰지요. 주석 처리한 내용은 실행할 때 실행해주는 프로그램이 그 부분은 무시하고 실행합니다. 안타깝게도 html 주석은 좀.. 복잡합니다.. 이런 식으로 내가 쓴 내용을 사이에 .. 코딩이 뭐지요?? '4차 산업혁명'이라는 이상한 단어가 온 세상에 난무하면서 '코딩'이 요즘 핫하게 주목받고 있습니다. 그런데 사실 코딩을 배워보지 않은 사람은 그게 뭔지 이해하기가 쉽지 않습니다. 그래서 오늘은 과연 코딩이 무엇인지 간단하게 알아봅시다! 1. 코딩이란? 코딩은 프로그래밍 언어를 가지고 코드를 짜는 행위를 말합니다. '프로그래밍'이라고도 하지요. 이건 일본어, 중국어 등 외국어를 가지고 글을 쓰는 것과 같습니다. 우리가 외국어로 글을 쓰게 되면 문법과 어휘를 공부한 다음 그 규칙에 맞게 글을 쓰게 되지요? 그리고 우리가 의사소통 하고 싶은 대상에 따라 그 사람이 알아들을 수 있는 외국어를 선택하게 됩니다. 그거와 같이 코딩도 언어를 가지고 문법과 정해진 어휘에 맞춰서 글을 쓰는 겁니다. 프로그래밍 언어 또.. HTML 코딩하기! ① 처음 만드는 HTML 문서 이전 포스팅에서 개발 환경을 다 구축하고 코드를 보관할 html 폴더까지 만들었습니다. 이번에는 바로 html 문법의 기본 구조를 보고 실제 코딩을 해봅시다! 1. Html 기본 구조 저번 포스팅에서 "새 파일" 버튼을 알려드렸지요? 그 버튼을 눌러서 "structure.html" 파일을 만들어주세요. 참고로 VS code에서는 파일의 확장자를 꼭 지정해주어야 합니다. 확장자란 파일 이름을 보면 내가 정한 이름 옆에 .하고 붙어있는 것입니다. 이건 이 파일이 어떤 파일인지 알려주는 부분입니다. 우리는 html 파일을 만들 것이기에 반드시 파일명과 .html을 쓰셔야 합니다. structure 파일을 만드시면 welcome 이 있던 부분에 우리가 만든 파일이 뜰 겁니다. 그리고 파일명 아래에 숫자 1 이 .. HTML을 시작해보자! 저번 시간에는 HTML이 도대체 무엇인가를 살펴보았습니다. 그런데 여전히 '그래! HTML이 사이트 만드는 언어라는 건 알겠어. 근데 그래서 그걸 어떻게 쓰라는 건데? 그게 뭐 어떻게 작동하길래 사이트를 만들 수 있다는 거야??' 라는 생각이 드실 수도 있습니다. 우리는 고작 정의만 봤으니 당연합니다. 만일 코딩을 한 번도 안 해보신 분이시라면 더더욱 뜬구름 잡은 소리 같으실 겁니다. 그래서 오늘부터 본격적으로 코딩에 필요한 기본 세팅을 하고 HTML을 시작해 봅시다! 우선 앞으로 우리가 같이 공부할 순서를 한 번 집어보고 HTML에 대해 이야기해봅시다! - HTML과 함께 웹 디자인에 사용되는 아이들 HTML이 웹 사이트를 만드는 기본 언어라는 건 이미 앞에서 봤습니다. 그런데 안타깝게도 이것 하나만 .. 이전 1 2 다음
