Extra Shot

지난 포스팅에서는 기본적인 스타일 작성법에 대해 알아보았습니다. 어떤 태그에 대해 공통적인 스타일을 작성하는 법은 알았는데, 어떤 div에는 이런 스타일을 적용하고, 다른 div에는 저런 스타일을 적용하고 싶다면 어떻게 해야할까요? 인라인 형식으로 한땀한땀 적용시켜주는 방식도 있겠지만, 개발자들은 훨씬 더 간편한 방법을 만들어냈습니다. 바로 id와 class 라는 선택자입니다. html 태그에 id나 class 값을 부여하고 css에서 해당 선택자를 불러와서 스타일링을 하는 방식으로 사용됩니다. 내용 이런식으로 지정하는데요 한개의 태그에 id와 class를 동시에 적용할 수 있다는것을 알 수 있습니다. 이제 각 요소를 구분하거나 선택하는 방법에 대해 알아봅시다 id 아이디는 한 페이지에서 단 한개의 요소..

브라우저는 보안 정책으로 자동으로 모든 주소를 https로 연결하도록 되어있습니다. 사실상 보안을 생각한다면 이게 맞는데.. 아직까진 https 연결을 지원하지 않는 웹사이트가 더러 있습니다. 특히 개인이 운영하는 사이트같은 경우에는 말이죠.. http로만 연결되는 웹사이트에서는 큰 문제를 보이지 않습니다만 https로 연결되는 경우 http로 시작하는 주소는 연결이 거부되어 이미지가 로딩이 되지 않는 등 페이지가 제대로 보이지 않는 문제가 발생합니다. 이를 해결(?)하는 몇가지 방안을 제시합니다. 브라우저 관련 예시는 전부 크롬(PC)를 기준으로 작성하였습니다. 0. 주소 변경 일시적인 방안입니다. 주소창을 클릭해 맨앞에 http:// 를 입력하거나 변경하는것입니다. 북마크에 저장할때도 http로 저장..

아이디 분실시 임시로 수정할 파일: /head.sub.php 파일을 열어 맨 아래줄 밑에 아래 코드를 삽입합니다 만약 운영중이라거나 하는 이유로 일단 웹페이지상에서 안보이게 하고싶다면 이렇게 주석으로 달아줍니다. 홈페이지에 접속하면 가장 왼쪽 위에 아이디가 보입니다(배경색과 글씨색이 비슷해서 잘 안보일수도 있음) 주석으로 처리한 경우 f12로 개발자도구를 열어 아래 주석처리된 아이디를 찾아주세요 *페이지 내용 확인하는 방법 아이디를 확인했으면 적었던 내용을 삭제하고 다시 업로드해줍니다. 이 외에도 db 관리 페이지에서 확인하는 방법이 있는데 db페이지를 즐겨찾기에 저장해둔게 아닌이상 주소 찾아서 들어가기도 귀찮고 번거롭기 때문에 위 방법만 작성합니다(사실 캡쳐뜨기 귀찮았어요 죄송합니다 비밀번호 분실시 다..

웹페이지에서 특정 요소의 스타일 등을 확인할 수 있는 방법입니다. PC 크롬 브라우저 기반으로 작성하였습니다만 다른 브라우저에서도 비슷한 기능을 제공합니다. f12를 누르면 개발자도구가 뜹니다. 개발자도구 탭은 오른쪽이나 아래 뜨는데 거기서 왼쪽 위에 있는 버튼을 누르면 원하는 위치에 마우스를 올려 해당하는 요소와 스타일을 확인 할 수있습니다. 기본으로 활성화되어있기도 하니 마우스오버 했을때 해당 요소가 파랗게 오버레이가 뜨지 않으면 버튼을 다시 한번 눌러주세요 [Elements] 웹문서의 html코드버전이 보이는 창입니다. 3에서 마우스오버한 요소가 하이라이트 됩니다. 한 요소라도 여러개의 요소가 감싸져있기도 하니 밖이나 안에 있는 요소를 클릭하여 원하는 부분을 찾습니다. * php의 경우 다른 파일들..

html 태그를 작성하는것 만으로는 웹페이지를 원하는 모양으로 웹페이지를 꾸미기가 어렵습니다. 그것을 도와주기 위해 존재하는것이 바로 css입니다. Cascading Style Sheet의 약자로 스타일시트라고도 흔히 부르는데 웹 코딩 얘기 할때 스타일이 어쩌구 하면 대충 다 css얘기라고 생각하시면 됩니다.(아마) css의 대표적인 특징이라면 'cascading'의 의미에 있는 '위에서 아래로 내려온다'는 속성이 있습니다. 무슨 뜻이냐 하면 스타일시트에 적은 내용은 브라우저가 위에서부터 아래로 순서대로 읽어내려가기 때문에 위에서 적용된 스타일을 아래서 무효화시키고 변경시킬 수 있다는 뜻입니다. 예를들면 p 태그에 대한 스타일로 폰트 사이즈를 13px로 적었다고 합시다. 그리고 2번 라인에 똑같은 p에 ..

아보카도 에디션에서 소속(선택 A) 또는 종족(선택 B) 이미지(아이콘)를 선택수정으로 한꺼번에 변경할 경우 전부 같은 이미지로 변경되는 오류에 대한 수정 방안입니다. 수정할 파일: adm/class_list_delete.php, adm/side_list_delete.php class_list_delete.php 파일의 46번째줄 $image_name = "class_".time().".".$exp; 해당 내용을 아래와 같이 변경합니다. $image_name = "class_".$k.time().".".$exp; 같은 방식으로 side_list_delete.php 파일의 46번째줄 $image_name = "side_".time().".".$exp; 해당 내용을 아래와 같이 변경합니다. $image_na..

이번에는 문자를 꾸며주는 인라인 태그들과 약간의 특수성을 가진 태그들에 대해 알아봅시다. *인라인이 뭔데? 라고 생각 하시는 분들은 먼저 이쪽☞[웹코딩의 기초] inline? block? 요소가 가지는 기본속성 - display 의 인라인 버전이라고 생각하시면 좋습니다. 어떤 작은 구간을 나누는데 사용합니다. 블록요소인 와는 달리 어떤 문장의 일부만 색상을 변경한다던지 등의 역할을 할 수 있습니다. 스타일을 지정하기 전까지는 아무런 변화도 나타나지 않습니다. 원래는 글꼴을 이탤릭(기울임)체로 만들기 위해 존재하던 태그였습니다만 모든 태그에는 단순히 문자를 꾸미는것을 넘어 어떠한 의미가 필요하기 때문에 의미가 부여된 태그중에 하나입니다. 'idiomatic text element' 라고 명명되어있으며 문장..

이번에 알려드릴 태그는 태그입니다 이것도 에디터에서 생성할수 있는 기능이 있는데 이 테이블의 기본 구조에 대해서 알아봅시다 테이블 태그는 아마 2000년대 초반이나 그보다 더 과거에 html 코딩을 해본적이 있으신 분들이라면 매우 익숙한 태그일거라고 생각됩니다. 현재는 테이블로 레이아웃을 짜는것이 금지(?)되어있습니다만 과거에는 다들 테이블 코딩을 했었죠 지금은 그렇게 안하는 가장 큰 이유는 표가 가지는 특성이 있고 이 뜻을 해치는 사용법을 지양하고있기 때문입니다. 예전에는 테이블태그 안에 들어가는 태그로 ,, 정도가 있었는데 지금은 더 복잡해져서 여기에 추가된 태그에 대해 이야기하고 구조를 설명해 보도록 하겠습니다. 먼저 기본 구조(필수로 들어가야하는 구성)를 확인해봅시다 표 한 칸 이렇게가 기본 구조..

이번 포스팅은 와 사용법에 대해 알아보려고 합니다. 목록을 나타내는 태그는 특정 규칙을 따라 작성해야 하기 때문에 외워두시는 것을 추천합니다. 사실 외우지 않으셔도 검색하면 나오긴 하지만 이런 규칙이 있다는 정도는 알아주세요. 이 목록 태그들은 에디터에서 기본적으로 제공되고있는 기능에도 포함되어있어서 보기에 친숙할수도 있겠습니다 (

사실 태그는 css로 꾸며주기 전까지는 실제로 웹상에서 봤을때 어디서부터 어디까지가 어떤 태그로 구성되어있는지 대부분은 알기 어렵습니다. 하지만 시각적으로는 확인할수 없더라도 우리는 언제나 용도에 어울리는 태그를 사용하려 노력해야 합니다. 어떤 태그를 썼냐에 따라 웹에서 검색했을때 유의미한 차이를 만들기도 하지만 시각적으로 웹을 볼 수 없는 사람들에게도 아주 중요한 정보를 제공하기 때문입니다. 비유를 하자면 영상에 삽입된 자막과 비슷한 역할을 합니다. 이렇게 말하는 저도 모든 태그를 적재적소에 쓰지는 않고 게으름을 피우곤 하지만.. 태그의 종류가 너무 많기 때문에 전부 다 설명하지는 않고 자주 쓰이는 것들 위주로 설명 해보려 합니다. 이번 포스팅에서는 에 대해 설명합니다. 'division'의 약자입니다..