자라나라

임시저장의 중요성을 정말 뼈져리게 느꼈다.. 거의 다 작성했는데 나의 실수로 날아가버렸다 허탈하다.. 보이스피싱으로 몇백 날리는 것보다는 낫다 그래도 Semantic tag는 특정 태그에 의미를 부여하여 각종 기능을 부여할 수 있고, 또한 프로그램밍 코드를 읽고 의미를 인식할 수 있도록 하는 지능형 웹을 구현하기 위한 태그이다. 1. Header and nav A is a container usually for either navigational links or introductory content containing to headings. 둘의 차이를 보자. 을 쓰면 document 전반적으로 코드를 읽기 쉬워지며, 어떤 내용이 있을지 쉽게 식별가능하다 하지만 를 쓰면 한눈에 디테일을 알 수 없다. A..

1. Requiring an Input 늘 해오던 것에 required만 추가 되었다. 이 경우 꼭 빈칸을 채워야만 다음으로 넘어갈 수 있게 된다. 이처럼 type="number"도 가능! 설정한 answer값과 일치해야만 접근할 수 있게 만들기도 하는데, 이 부분은 javascript로 배워보자 2. Checking text length 숫자처럼 character에도 길이 제한을 줄 수 있다 If a user tries to submit the with less than the set minimum, this message appears: And if a user tries to type in more than the maximum allowed number of characters, they don’..

1. form (아이디, 패스워드 입력창 만들기) html form이란 user가 다양한 정보를 입력하고, 그 내용을 서버로 전달하기 위해 사용되는 태그이다. 로그인, 회원가입, 견적서 등에 쓰인다. 바로 예시를 보자 먼저 을 만들어 준다 에서 action에 들어갈 주소가 바로 input된 정보들이 보내질 서버이다. form 태그를 만들었으면 그 안에 도 넣어준다. closing tag는 넣지 않는다. When we create an element with type="text", it renders a text field that users can type into. Note that the default value of type is "text". It’s also important that we in..

1. 기본 틀 만들기 먼저 표를 만들어준다. table element 입력 이제 행(row), 열(column), 셀(cell)로 표를 구성해볼 것이다. 표에 두개의 행(table row, )을 만들어 주었다. 두 번째 행에 두개의 데이터(table data,)를 주었다. 비어있던 첫번째 행에 세개의 데이터를 주었다. 아니 저건 그냥 데이터가 아니다 제목 셀(table head,)이다. table head table head table head table head(아닐 때도 있음) data data table head(아닐 때도 있음) data data 보통의 표는 위와같이 맨 윗줄에 가로로, 맨 왼쪽에 세로로, 제목셀이 존재한다. (늘 예외는 있다) 이제 앞서 작성한 코드를 렌더링 해보자 (여기엔 ta..

모든 태그 사용법은 이곳에! https://developer.mozilla.org/en-US/docs/Web/HTML/Element

지금까지는 웹페이지를 위한 tool들을 배웠다면 오늘은 웹페이지에는 나타나지 않지만, 읽기쉽게, 깔끔하게 코드 작성하는 방법을 배워볼 것이다. 1. whitespace and indentation. Programmers use two tools to visualize the relationship between elements : whitespace and indentation. 1.1 whitespace The browser ignores whitespace in HTML files when it renders a web page, so it can be used as a tool to make code easier to read and follow. 위의 작성된 두 코드 모두 웹에는 똑같이 렌더링된다..

1. 같은 사이트 내의 페이지로 링크하기 지금까지는 외부사이트로 링크하는 법을 배웠다. 하지만 홈페이지를 운영하려면 내부끼리의 연결도 필요하다 Home , About, Contact 등등.. 처럼 이를 위해선 먼저, 각각의 파일들을 어디에 저장할지 정해야한다. When making multi-page static websites, web developers often store HTML files in the root directory, or a main folder where all the files for the project are stored. we can link web pages together using a relative path. 같은 파일에 있는 페이지는 위와같이 간단한 텍스트로 링크할..

지난 이틀은 html의 다양한 elements들을 배우고 어떤 기능들을 하는지 살펴보았다. 오늘은 document의 전체적인 틀을 순차적으로 알아보는 걸로! 1. html 선언 ( document type declaration) We can let web browsers know that we are using HTML by starting our document with a document type declaration. 쉽게 말해 선언된 html의 버전이 무엇인지 웹 브라우저에 알려주는 역할을 한다. It tells the browser what type of document to expect, along with what version of HTML is being used in the docume..

1. List 만들기 1-1. Unordered list 말 그대로 순서가 없는 목록태그. 각 항목 앞에 기호로 표시된다. Limes Tortillas Chicken -> Limes Tortillas Chicken 을 쓰면 ■ 로 나타나는 등 다양한 기호로 바꿀 수 있다 1-2. Ordered List 순서가 있는 목록태그. 기본적으로 숫자로 표시된다 Preheat the oven to 350 degrees. Mix whole wheat flour, baking soda, and salt. Cream the butter, sugar in separate bowl. Add eggs and vanilla extract to bowl. -> Preheat the oven to 350 degrees. Mix w..

1. 랑 랑 보여지는 모습은 같은데 쓰임에 어떤 차이가 있을까? In this case, this is done purely for demonstrative purpose. In the future you will find that elements are often used to group related content. This can serve to give a page some added structure and to allow for more modular styling. It is primarily for the content creator and used to distinguish between paragraphs and sets of content. 2. ~ 까지의 headings가 있다. 3..