일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- keep -ing
- 형변환
- continue to
- by any chance
- end up ing
- if조건절
- UE4
- 제5인격
- for ing
- counldn't have
- 명절 표현
- C++
- ISTQB
- 게임QA
- Realtime Rendering
- it's a good thing
- 명세기반테스트
- gameQA
- metascore
- relif
- might have p.p
- I'm glad
- 변수
- html
- 코로나19
- happen to
- sort함수
- know
- by until
- java
- Today
- Total
목록Software/WEB (15)
Records rather than Memories

정보들을 잘 정리하는 방법을 코드로서 짜는 것에 많은 시행착오들이 있어왔다. 그 중 최근 등장한 그리드라는 기술을 사용해 정보 정리를 해보자. 디자인을 하기 위해 태그를 사용해야하는데 h1태그를 사용하면 제목이라는 의미가 생기게 된다. 즉 어떤 의미도 존재하지않는 태그가 필요할 때가 있다. 그럴 때 사용하는 태그가 div라는 것이 있다. * div 는 block level element이다. span 은 inline element 다음과 같이 div를 사용해 NAVIGATION과 ARTICLE이라는 정보를 아무 의미없는 태그를 사용해 나타냈다. 두 개의 태그를 나란히 배치하고 싶거나 같이 묶고 싶으면 디자인의 목적만으로 div id="gird"라는 부모 태그를 만들어 테두리를 핑크로 나타내주었다. 자 여..

디자인에서 핵심적인 요소인 박스 모델 - HTML 태그 하나하나를 박스로 취급해서 부피감을 결정하는 것이다. 여기서 h1태그인 CSS와 a태그 css를 비교해보자. h1태그는 줄바꿈이 이루어졌지만 a태그는 줄바꿈이 되지 않고 다른 내용과 바로 이어지게 된다. 제목은 화면 전체를 차지하는게 눈에 띄고 링크는 다른 라인과 이어져야 편리하기 때문에 기본 설정이 이렇게 되어있다. 그렇다면 실제로 해당 태그들이 어떤 부피감을 가지고 있는지 알아보자. 각 태그에 테두리를 표시해 부피감을 나타내보자. 테두리의 두께 border-width 테두리 색 border-color 테두리 실선 border-style:solid 다음과 같이 h1태그와 a1이 가지는 컨텐츠를 얼만큼 크기로 쓰는지 눈으로 확인할 수 있다. 쓰임새에..

1. 웹 페이지에 있는 a태그를 모두 검은색으로 바꾼다. 2. 사용자가 바운 한 적이 있는 페이지는 회색으로 바꾼다. 클래스라고 하는 것은 같은 의도에 따라 그룹핑 한 것이다. 3. 머물고 있는 링크는 방문하고 있다는 뜻에서 빨간색으로 표시한다. id선택자는 유일 무이한 값이다. 즉 acitive 값은 한번만 쓰일 수 있다. 기본적으로 가까이에 있는 명령이 더 높은 우선순위를 갖는다. * 모든 a태그를 가르키는 선택자와 id값이 active인 태그만을 가르키는 선택자 중 id 선택자가 범위가 좁기 때문에 포괄적인 선택자를 우선순위를 낮게해 큰 그림을 그리고 클래스 선택자 , id선택자들로 상세한 설계를 한다. 태그 < 클래스 < id

만들었던 페이지에서 가장 중요한 h1 제목 "Live academy"를 좀더 크게 하고 싶다면? 또한 그것을 가운데 정렬하고 싶다면? 1. Live academy가 웹페이지에서 어떤 태그인지 찾아야 한다. 2. 모든 h1태그를 바꾸고 싶다면 다음과 같이 h1 { } 안에 넣어야 할 태그를 찾아야한다. 여기서 글자 크기에 관련된 속성은 font-size : px이다. 또한 가운데 정렬은 text-align: center 이다. "사실 이 모든것은 구체적인 property를 알고 있지 않아도 검색을 통해 바로바로 알 수 있다. 또한 에디터가 추천을 해준다. 코딩은 끊임없이 기계의 도움을 받으며 진행하기 때문에 굳이 모든 property를 외우려고 하지말자."

1. 다음과 같은 페이지에서 part2라는 탭을 빨간색으로 바꾸고 싶다고 하면 어떻게 할까? 사실 이전 태그를 통해 링크가 달려있는 탭을 모두 검은색으로 설정했기 때문에 다른 방법이 필요하다. 따라서 part2를 감싸고 있는 a 태그에 직접 css코드를 넣으면 된다. style이라는 속성을 써서 html은 css의 문법에 따라 해석해 그 결과를 style이 위치하고 있는 태그에 적용된다. 여기서 "color:red"는 html이고 style은 그 뒤에 속성이 들어온다는 약속이 있다. 또한 여기서 a{ }은 주고 싶은 효과를 누구에게 줄지 선택한다는 의미에서 선택자(selector)라 불린다. 물론 color:black은 효과이다. 2. 다음과 같이 탭들의 밑줄을 없애고 싶다면 어떻게 해야할까? text-..
웹페이지를 디자인하기 위해 html에 태그를 추가하는 방식이 있다. 하지만 그것보다 근본적인 해결을 위한 css가 있다. css는 html과 완전히 다른 언어이다. 그렇다면 html에서 어떻게 css를 사용할까? 이 코드를 html이 아니라 css문법으로 읽어야해 라고 html 문법이라고 말해야한다. 즉, 태그를 사용해 안의 내용을 css문법에 맞게 해석하라고 하는 것이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 WEB - CSS a { color:black; } WEB HTML CSS JavaScript CSS Cascading Style Sheets (CSS) is a style sheet language used for ..